nongminwang/utils/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);
};