最近在开发基于nuxt3.0的项目，看了官网的网络请求，感觉不太适合，就自己基于官网的useFetch()方法封装了一个网络请求，下面开始实现封装。
第一步：新建http.ts文件，用于编写封装代码
我选择在composables目录中新建http.ts。composables是官方默认的插件目录，官方描述：Nuxt 3使用composables/目录使用auto-imports自动将Vue组合导入到应用中!
封装代码如下：
/**
* nuxt项目目录/composables/http.ts
*/
// 基于useFetch()的网络请求封装
//全局基础URL
const BASEURL: string = "http://127.xxx.xxx:3000"; //全局后台服务器请求地址
//定义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 ?? BASEURL) + obj.url,
{
method: obj.method ?? "GET",
query: obj?.query ?? "",
body: obj?.body ?? "",
onRequest({ request, options }) {
// 设置请求报头
options.headers = options.headers || {}
/**如果接口需求携带token请求，则可先自行使用官方的useCookie()方法设置Cookie存储后，再使用useCookie()方法，取出token使用。如下例子：*/
//const token = useCookie('token')
//@ts-ignore
//options.headers.Authorization = token.value
},
onRequestError({ request, options, error }) {
// 处理请求错误
console.log("服务器链接失败!")
reject(error)
},
onResponse({ request, response, options }) {
// 处理响应数据
resolve(response._data)
},
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>
第三步：成功！！！接下来就可以看到请求结果了，我们可以打开控制台查看：
至此，我们的nuxt3.0网络请求的简单封装就实现啦！
在这里给在nuxt3.0项目中使用ts的小伙伴一个小提示，注意整个项目中不要使用中文路径哦~记住是完整项目路径都不要有中文！否则会报错！
