NUXT4.0实现网络请求二次封装

😊最近在开发基于nuxt4.0的项目，我之前的基于nuxt3.0的封装不太适合，下面开始基于nuxt4.0实现重新封装。

🚚第一步：新建http.ts文件，用于编写封装代码

我选择在composables目录中新建http.ts。composables是官方默认的插件目录。

👇封装代码如下：

/**
*  nuxt项目目录/composables/http.ts
*/
//  基于$fetch()的网络请求封装

//全局基础URL
const BASEURL: string = "http://localhost:3000";  //全局后台服务器请求地址

//定义ts变量类型接口
interface HttpParams<T = any> {
    baseURL?: string,  //请求的基本URL，即后台服务器地址，（若服务器请求地址只有一个，可不填）
    url: string,      //请求api接口地址
    method?: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD' | 'OPTIONS',   //请求方法
    query?: Record<string, any>,       //添加查询搜索参数到URL
    body?: T         //请求体
}

/**
 * 网络请求方法
 * @param obj 请求参数
 * @returns 响应结果
 */
export const http = <T>(obj: HttpParams) => {
    const res = new Promise<T>((resolve, reject) => {
        $fetch(
            (obj.baseURL ?? BASEURL) + obj.url,
            {
                method: obj.method ?? "GET",
                query: obj?.query ?? undefined,
                body: obj?.body ?? undefined,
                onRequest({ request, options }) {
                    // 设置请求报头
                    options.headers = options.headers || {}
                    /**如果接口需求携带token请求，则可先自行使用官方的useCookie()方法设置Cookie存储后，再使用useCookie()方法，取出token使用。如下例子：*/
                    //const token = useCookie('token')
                    //@ts-ignore
                    //options.headers.Authorization = token.value||null
                },
                onRequestError({ request, options, error }) {
                    // 处理请求错误
                    console.log("服务器链接失败!")
                    reject(error)
                },
                onResponse({ request, response, options }) {
                    // 处理响应数据
                    resolve(response._data as T)
                },
                onResponseError({ request, response, options }) {
                    // 处理响应错误
                }
            },

        )
    })
    return res;
}

🚀第二步：调用封装

接下来在test.vue中调用封装，如下代码：

<template>
    <div>
        测试页面
    </div>
    <button @click="btn()">请求测试按钮</button>
</template>

<script setup lang="ts">
//引入http.ts封装的网络请求方法
import { http } from '~/composables/http';

const btn = async () => {
    //定义请求参数
    const obj = {
        method: "POST",
        url: '/user/login',
        //"POST"方法传参:
        body: {
            name: "测试",
            phone: "176xxxxxx1",
            password: "test123",
        },
        //"GET"方法URL传参:
        // query: {
        //     name:"test"
        // }
    }
    //开始请求
    let res = await http(obj)
    console.log("请求结果：", res);
}

</script>

🎉第三步：成功！！！接下来就可以看到请求结果了，我们可以打开控制台查看：

至此，我们的nuxt4.0网络请求的简单封装就实现啦🎉🎉🎉！

💡💡💡在这里给在nuxt4.0项目中使用ts的小伙伴一个小提示，注意整个项目中不要使用中文路径哦~记住是完整项目路径都不要有中文！否则会报错！