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

uniapp+vue3+ts请求接口封装

news 2025/8/15 9:04:17

1.安装luch-request

yarn add luch-request

npm install luch-request

2.新建文件src/utils/request.ts
需要自己修改config.baseURL和token（获取存储的token）

// 
import HttpRequest from 'luch-request';
import type { HttpRequestConfig, HttpResponse, HttpError, HttpTask } from "luch-request";
// * 请求响应参数(包含data)
export interface Result {code: numbermessage: stringsuccess?: boolean
}
export interface ResultData<T = any> extends Result {data: T
}
export const ResultEnum = {SUCCESS: 200,EXPIRE: [305, 601, 602],ERROR: -1,ERRMESSAGE: '请求失败',TIMEOUT: 25000,TYPE: 'success'
} as const// 创建 HTTP 请求实例
const request = new HttpRequest();
// 全局配置
request.setConfig((config) => {/* config 为默认全局配置*/// config.baseURL = 'https://www.example.com' /* 根域名 */// 判断环境设置不同的baseURLconfig.timeout = ResultEnum.TIMEOUTconfig.baseURL = "https://...../"//import.meta.env.VITE_APP_NODE_ENV === 'development' ? import.meta.env.VITE_APP_BASE_API : import.meta.env.VITE_APP_BASE_URLreturn config
})
// 请求拦截器
request.interceptors.request.use((config) => {// 在发送请求之前做些什么，比如添加 tokenconst token = uni.getStorageSync("accessToken"); // 获取你的 tokenif (token) {config.header = { ...config.header, Authorization: `Bearer ${token}` };}return config;},(error) => {// 对请求错误做些什么return Promise.reject(error);}
);// 响应拦截器
request.interceptors.response.use((response) => {// 对响应数据做点什么// 可以根据状态码进行全局错误处理if (response.statusCode === 200) {return response.data;} else {const status = response?.statusCode// 处理 HTTP 网络错误let message = ''if (status === 401) {uni.removeStorage({key: 'accessToken',success: function (res) {uni.showModal({title: "提示",content: "身份已过期，将跳转登录！",showCancel: false,success: (res) => {if (res.confirm) {uni.navigateTo({url: '/pages/login/login'})}}});},})} else {switch (status) {case 403:message = '拒绝访问'breakcase 404:message = '请求地址错误'breakcase 500:message = '服务器故障'breakdefault:message = '网络连接故障'}uni.showToast({title: message,icon: 'error'})}return Promise.reject(response);}},(error) => {// 对响应错误做点什么const status = error?.statusCode// 处理 HTTP 网络错误let message = ''if (status === 401) {uni.removeStorage({key: 'accessToken',success: function (res) {uni.showModal({title: "提示",content: "身份认证失败，将跳转登录！",showCancel: false,success: (res) => {if (res.confirm) {uni.navigateTo({url: '/pages/login/login'})}}});},})} else {switch (status) {case 403:message = '拒绝访问'breakcase 404:message = '请求地址错误'breakcase 500:message = '服务器故障'breakdefault:message = '网络连接故障'}uni.showToast({title: message,icon: 'error'})}return Promise.reject(error);}
);
const http = {get<T>(url: string, params?: object, config?: HttpRequestConfig): Promise<ResultData<T>> {return request.get(url, { params, ...config })},post<T>(url: string, data?: object, config?: HttpRequestConfig): Promise<ResultData<T>> {return request.post(url, data, config)},put<T>(url: string, data?: object, config?: HttpRequestConfig): Promise<ResultData<T>> {return request.put(url, data, config)},delete<T>(url: string, data?: object, config?: HttpRequestConfig): Promise<ResultData<T>> {return request.delete(url, data, config)}
}
export default http;

3.使用

import http from '@/utils/request'try {const response = await http.get("接口名",{ id: 11409 });console.log(response,'测试：1.需要身份验证token，2.不需要身份验证，3.带参数请求接口')} catch (error) {console.error('Failed to fetch data:', error);}