当前位置：首页 > news >正文

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

news 2026/5/12 16:11:14

😊最近在开发基于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>,       //添加查询搜索参数到URLbody?: 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>