开发背景

熟悉我的朋友都知道我在开发自己的 个人网站 ，后端使用的是 NestJS + MySQL ，前端使用的是 NuxtJS + AntDesignVue ，目前前端使用的是Vue3的CompositionAPI风格，其实在很久之前，我就已经用Nuxt2 + ElementUI 开发过一版了，但觉得很丑就作废了，直到今年开始玩掘金，觉得掘金风格很 Nice ，UI 就打算仿掘金了。OK，扯远了，当时使用 Nuxt2 的时候请求使用的还是 axios ，现在的 Nuxt3 官方极力推荐useFetch，今天就来简单封装一下useFetch，主要处理请求拦截和响应拦截。

认识useFetch

我们可以打开官方文档来简单看看什么是useFetch，以及如何使用它。

image.png

看这官方文档有点啰哩吧嗦，简言之，你可以用useFetch获取数据。

来看这篇文档才是重点，教你如何使用。

image.png

这么一看就一目了然了，他有哪些参数，分别是做什么的，应该不难看出一二。

项目中使用

假设我们当前在 layouts/default.vue 中要请求一个文章列表，我们可以这样写：

<script setup lang="ts">
const res = await useFetch("/api/post/list");
</script>

<template></template>

<style></style>

但如果很多地方都要请求文章列表，岂不是把同样的代码要写很多遍，可万一哪一天，接口地址发生改变，又得到处改，所以，为了解决这个问题，决定把所有的接口请求放在同一个文件中，页面或组件只需要调方法。

在/api目录下新建一个index.ts文件，所有的接口请求都放在这个文件中，这样的话页面只需要调用GetPostList方法即可，哪里需要就在哪里调用，接口地址发生改变只需要改这个方法即可。

export const GetPostList = async (body) => {
  return await useFetch("/api/post/list",body);
}

通过文档我们不难发现，它的所有请求拦截和响应拦截都在第二个选项参数中，所以我们对第二个选项参数做个封装。

image.png

这里我在/utils/Http.ts中简单把所需要的一些属性进行封装，当然我这里可能不全，如果你想补全，参考这里的文档即可：

// 暴露这么一个属性
export const requestParams = {
  baseURL:"http://xxx.com/api",
  method:"post",
  headers:{},
  // 请求拦截
  onRequest({ request, options }) {},
  // 请求错误
  onRequestError({ request, options, error }) {},
  // 响应拦截
  onResponse({ request, response, options }) {
    return response._data;
  },
  // 响应错误
  onResponseError({ request, response, options }) {}
}

最后修改一下/api/index.ts文件的请求：

import { requestParams } from "~~/utils/Http";

export const GetPostList = async (body) => {
  return await useFetch("/api/post/list",{ ...requestParams, ...body });
}

我这里还涉及到一个服务端返回500错误的处理，在/api/index.ts中定义一个方法统一处理返回值：

const Result = (res,err) => {
  if(!err.value) return res;
  
  return {
    code:STATUS_CODE.FAIL,
    message:"服务异常",
    data:{}
  };
}

继续修改GetPostList方法：

import { requestParams } from "~~/utils/Http";

export const GetPostList = async (body) => {
  const {data:result,error} = await useFetch("/api/post/list",{ ...requestParams, ...body });
  return Result(result,error);
}

这样子一个简易请求就封装完成了。

结语

我虽然是一名工作三年+的前端了，但工作以来没有老师父带我，很多东西都是自己摸爬滚打练出来，如果哪里有不对的地方，欢迎评论区指正，一起学习，一起进步~