数据请求是所有网站中不可避免的需求，而且随着网站功能的细致划分所需要的请求也急剧上升。

那么这种就需要我们合理的对请求进行分配及管理，本篇文章就介绍基于nuxt3封装请求详细流程。

一、封装请求方法

    1.1、根目录的composables文件夹下创建http.ts

    1.2、http.ts文件内容如下

import { message } from 'ant-design-vue';
//  基于useFetch()的网络请求封装
//定义ts变量类型接口
interface HttpParms {
    baseURL?: string,  //请求的基本URL，即后台服务器地址，（若服务器请求地址只有一个，可不填）
    url: string,      //请求api接口地址
    method?: any,   //请求方法
    query?: any,       //添加查询搜索参数到URL
    body?: any         //请求体
}
/**
 * 网络请求方法
 * @param obj 请求参数
 * @returns 响应结果
 */
export const $http = (obj: HttpParms) => {
    const res = new Promise<void>((resolve, reject) => {
        useFetch(
            (obj.baseURL ?? '全局后台服务器请求地址') + obj.url,
            {
                method: obj.method ?? "GET",
                query: obj?.query ?? null,
                body: obj?.body ?? null,
                onRequest({ request, options }) {
                    // 设置请求报头
                    options.headers = options.headers || {}
                    options.headers.webToken = localStorage.getItem('token')?localStorage.getItem('token'):''
                },
                onRequestError({ request, options, error }) {
                    // 处理请求错误
                    message.warning('Request Error');
                    reject(error)
                },
                onResponse({ request, response, options }) {
                    // 处理响应数据
                    resolve(response._data)
                },
                onResponseError({ request, response, options }) {
                    message.warning('Request Error');
                    // 处理响应错误
					reject(options)
                }
            },

        )
    })
    return res;

}

    1.3、封装中使用ant-design-vue实现提示效果，需根据实际情况替换。

二、封装的请求在页面中的使用

    2.1、方式一

$http({
	method: "POST",
	url: '/api/Cart/addCart',
	//"POST"方法传参:
	body: {},
	//"GET"方法URL传参:
	// query: {
	//     name:"test"
	// }
}).then(res => {
	console.log(res)
})

    2.2、方式二

const { data } = await $http({
	method: "POST",
	url: '/api/Cart/addCart',
	//"POST"方法传参:
	body: {},
	//"GET"方法URL传参:
	// query: {
	//     name:"test"
	// }
})

请求方法的封装可以有效对响应及数据进行管理，也极大程度上减轻了代码的工作量。故在项目中对于请求的按需封装也成了所有项目必不可少的操作。