Nuxt3 封装request请求

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

1. 首先在目录utils下创建 api.js 跟 request.js 两个文件，api文件是用来写具体的接口函数的，request是用来二次封装 $fetch 以达到适配我们项目的需要。
2. 以下是我的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] //这里取接口最后的名称做key
	const {
		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);
};

3. 以下是我的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)
}

4. 页面中使用接口方法

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