uniapp+vue3+ts请求接口封装

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: number
  message: string
  success?: 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' /* 根域名 */
  // 判断环境设置不同的baseURL
  config.timeout = ResultEnum.TIMEOUT
  config.baseURL = "https://...../"//import.meta.env.VITE_APP_NODE_ENV === 'development' ? import.meta.env.VITE_APP_BASE_API : import.meta.env.VITE_APP_BASE_URL
  return config
})
// 请求拦截器
request.interceptors.request.use(
  (config) => {
    // 在发送请求之前做些什么，比如添加 token
    const token = uni.getStorageSync("accessToken"); // 获取你的 token
    if (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 = '拒绝访问'
            break
          case 404:
            message = '请求地址错误'
            break
          case 500:
            message = '服务器故障'
            break
          default:
            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 = '拒绝访问'
          break
        case 404:
          message = '请求地址错误'
          break
        case 500:
          message = '服务器故障'
          break
        default:
          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);
      }