Vue3使用@vueuse/core的createFetch代替axios封装网络请求

在Vue3项目中，可以使用@vueuse/core库的createFetch方法来封装网络请求。这个方法可以帮助我们更方便地处理网络请求，并且支持在请求前后进行一些操作。

安装

yarn add @vueuse/core

导入

我们导入createFetch方法和一些其他需要的库

import { createFetch } from '@vueuse/core';

封装请求

然后，我们使用createFetch方法创建一个名为useFetchApi的网络请求实例。在创建实例时，我们可以传入一些配置参数。

const useFetchApi = createFetch({
  baseUrl: 'https://api.example.com',
  options: {
    async beforeFetch({ options，cancel, url }) {
      const myToken = 'token';
      //处理一些白名单接口，等
      options.headers = {
        ...options.headers,
        Authorization: `Bearer ${myToken}`,
      };
      return { options };
    },
    afterFetch(ctx) {
      const { data, response } = ctx;
      if (response.status >= 200 && response.status < 300) {
        try {
          const jsonData = data;
          if (jsonData.code != 200) {
            //弹出提示
          }

          ctx.data = jsonData.data;
        } catch (error) {
          console.error(error);
          ctx.data = null;
        }
      }else if (response.status === 401) {
        //未登录提示
      }  else {
       //错误提示
        ctx.data = null;
      }

      return ctx;
    },
     onFetchError(ctx) {
      // 错误请求
      console.log('错误的请求，请稍后再试')
      return ctx
    }
  },
});

以上代码定义了一个useFetchApi实例，其中包含了三个方法：beforeFetch，afterFetch和onFetchError。在请求发送之前，beforeFetch方法会被调用，我们可以在这里进行一些操作，比如添加请求头信息。在请求完成之后，afterFetch方法会被调用，我们可以在这里对返回的数据进行处理。当有错误的请求时，调用onFetchError方法。

在beforeFetch方法中，我们示例性地添加了一个名为myToken的令牌，并将其作为Bearer Token添加到请求头中。你可以根据实际情况修改这部分代码。

在afterFetch方法中，我们首先判断了请求的状态码。如果状态码在200到300之间，说明请求成功，我们尝试将返回的数据转为JSON格式，并检查返回的code字段是否为200。如果不是200，显示一个警告通知。然后，我们将返回的数据赋值给ctx.data，方便在后续使用中获取数据。

如果请求的状态码不在200到300之间，说明请求出现了错误，我们同样显示一个错误通知，并将ctx.data设置为null。

最后，我们导出useFetchApi实例，以便在其他地方使用。

export default useFetchApi;

使用例子

接下来，我们给出一个使用useFetchApi实例发送接口请求的示例。

<script setup>
import { onMounted } from 'vue'
import useFetchApi from '@/utils/useFetchApi'
onMounted(() => {
  fetchData()
})
const fetchData = async () => {
  try {
    const { response, isFetching, execute } = await useFetchApi('/mountains').get()
    console.log(response)
  } catch (error) {
    console.error(error)
  }
}
</script>

在上述代码中，我们通过调用useFetchApi实例的get方法发送了一个GET请求，并传入了请求的URL。在try-catch块中，我们捕获了可能发生的错误，并进行了相应的处理。

useFetchApi('/mountains').get()是调用useFetchApi函数返回的一个对象，其中包含了response（返回的响应式数据）、isFetching（是否在请求中）和execute（手动提交）等属性。我们通过解构赋值的方式获取了这些属性。然后，我们打印了response的值。如果请求出现错误，我们将错误打印到控制台。

这样，我们就可以使用@vueuse/core的createFetch方法来封装网络请求，并通过useFetchApi实例来发送接口请求。这样做的好处是可以更方便地处理请求前后的操作，并且代码更加清晰易读。

以上就是今日分享的文章，希望对小伙伴们有帮助，晚安啦！