Nuxt3 封装request请求

本文主要是介绍Nuxt3 封装request请求，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Nuxt3已经为我们提供了 $fetch 直接用就好

首先在目录utils下创建 api.js 跟 request.js 两个文件，api文件是用来写具体的接口函数的，request是用来二次封装 $fetch 以达到适配我们项目的需要。
以下是我的request.js封装代码，可按需要修改

/*** @description 同步请求封装* @param {String} method 请求类型：get,post,delete,put...* @param {String} url  请求地址，不包含请求域名，如：/api/test* @param {Object} options  请求参数* @returns data or error*/
export const apiUse = async (url, method, options) => {// 当前locale将被存储在locale变量中const nuxtApp = useNuxtApp(); // 获取引入nuxt的第三方模块对象const runConfig = useRuntimeConfig(); // 获取环境变量const baseUrl = runConfig.public.baseUrl;const reqUrl = baseUrl + url;options = {method,headers: {"Content-Type": "application/json",},body: { // post 请求参数存放在body内，get请求参数放到params内...options,token: "",platform: "h5",language: nuxtApp.$i18n.locale.value,},};const {data,error} = await useFetch(reqUrl, options);if (error.value) {return error.value;} else {return data.value;}
};/*** @description 异步请求封装* @param {String} method 请求类型：get,post,delete,put...* @param {String} url  请求地址，不包含请求域名，如：/api/test* @param {Object} options  请求参数* @description key 一定要有，否则刷新会造成接口错误*/
export const asyncFetchData = async (url, method, options) => {const nuxtApp = useNuxtApp();const runConfig = useRuntimeConfig();const baseUrl = runConfig.public.baseUrl;const reqUrl = baseUrl + url;const key = url.split('/')[url.split('/').length - 1] //这里取接口最后的名称做keyconst {data,pending,error,refresh} = await useAsyncData(key, () => $fetch(reqUrl, { // useAsyncData也可以用useLazyAsyncData,区别就是useLazyAsyncData会等待SSR渲染完成在执行接口，而useLazyAsyncData是接口执行完成执行SSR渲染method,headers: {"Content-Type": "application/json",},body: {...options,token: "",platform: "h5",language: nuxtApp.$i18n.locale.value,},}));return {data,pending,error,refresh};
}/*** @description 此为apiUse的封装调用实例*/export const fGET = (url, params) => {return apiUse(url, "GET", params);
};export const fPOST = (url, params) => {return apiUse(url, "POST", params);
};export const fPUT = (url, params) => {return apiUse(url, "put", params);
};export const fDELETE = (url, params) => {return apiUse(url, "delete", params);
};/*** @description 此为asyncFetchData的调用实例*/
export const GET = (url, params) => {return asyncFetchData(url, 'GET', params);
};export const POST = (url, params) => {return asyncFetchData(url, "POST", params);
};export const PUT = (url, params) => {return asyncFetchData(url, "put", params);
};export const DELETE = (url, params) => {return asyncFetchData(url, "delete", params);
};

以下是我的api.js封装代码，可按需要修改

import {GET,POST,PUT,DELETE,fGET,fPOST,fPUT,fDELETE,
} from "./request"/*** @desc 根据Id查询隐私政策等文章* @param params 页面传递过来的参数*/
export const getNotice = (params) => {return POST('/sale/info/detail', params)
}

页面中使用接口方法


/*** @description 接口在页面中使用教程* 在页面中 不需要再Import 声明接口名，直接使用。因为Nuxt3会自动引用* getNotice 是api.js文件中封装的接口实例，仅需要输入参数即可。* then回调的是接口返回的结果，包含data,pending,error,refresh四种，可根据情况使用*/
getNotice({id: 1
}).then((res) => {const {data,error} = resif (error) {console.log(error.value)}else{console.log(data.value)}
})