Vue请求封装：使用createFetch 告别Axios

2023-10-08 21:43:12

前言

随着组合式函数在 Vue 中的普及，我们有必要重新审视请求封装的方式。Axios 虽然是一个强大的库，但在组合式函数中使用时却存在一些局限性。createFetch 作为一种更轻量、更适合组合式函数的请求封装工具，值得我们关注。

准备工作

在使用 createFetch 之前，我们首先需要安装它。可以通过以下命令进行安装：

npm install create-fetch

安装完成后，我们可以在 Vue 项目中引入 createFetch：

import { createFetch } from 'create-fetch'

createFetch 的使用

createFetch 的使用非常简单，我们只需要传入一个配置对象即可。配置对象包含以下属性：

baseUrl：请求的基本 URL，通常是 API 的根路径。
headers：请求头，用于设置请求时携带的 HTTP 头信息。
timeout：请求超时时间，单位是毫秒。
retry：请求重试次数。
beforeRequest：请求发送之前执行的回调函数。
afterRequest：请求发送之后执行的回调函数。

以下是一个使用 createFetch 发送 GET 请求的示例：

const fetch = createFetch({
  baseUrl: 'https://api.example.com'
})

fetch.get('/users').then(res => {
  console.log(res.data)
})

在 setup 函数中使用 createFetch

createFetch 的一大优势在于它非常适合在 setup 函数中使用。在 setup 函数中，我们可以直接访问组件的数据和方法，而无需通过 props 或 emit 进行传递。这使得请求封装更加灵活和方便。

以下是一个在 setup 函数中使用 createFetch 的示例：

import { createFetch, onMounted } from 'vue'

export default {
  setup() {
    const fetch = createFetch({
      baseUrl: 'https://api.example.com'
    })

    onMounted(() => {
      fetch.get('/users').then(res => {
        console.log(res.data)
      })
    })
  }
}