文章目录

• 前言
• aioxs二次封装配置
• • 报错element plus弹框引入不识别
• 还需要引入到同时从fig.json
• • 使用
• 总结

前言

aioxs二次封装配置

引入需要的文件创建class类

index.ts

import axios from 'axios'import type { AxiosRequestConfig, AxiosResponse, AxiosError, InternalAxiosRequestConfig } from 'axios'import { showMessage } from './status'import { IResponse } from './types'import { getToken } from '@/utils/aunt'interface api {  url: string  method: 'get' | 'post' | 'delete' | 'put'  data?: string}interface HTTP {  interceptorsRequest(): void}class Requests implements HTTP {  service = axios.create({    baseURL: import.meta.env.VITE_BASE_URL,    // timeout: 10000,  })  constructor() {    this.interceptorsRequest()    this.interceptorsResponse()  }  // axios实例拦截请求  interceptorsRequest() {    this.service.interceptors.request.use(      (config: InternalAxiosRequestConfig) => {        const token = getToken()        if (token) {          config.headers.authorization = `${token}`        }        return config      },      (error: AxiosError) => {        return Promise.reject(error)      }    )  }  // axios实例拦截响应  interceptorsResponse() {    this.service.interceptors.response.use(      (response: AxiosResponse) => {        if (response.status === 200) {          return response        }        ElMessage.error(showMessage(response.status))        return response      },      // 请求失败      (error: any) => {        const { response } = error        if (response) {          // 请求已发出，但是不在2xx的范围          ElMessage.error(showMessage(response.status))          return Promise.reject(response.data)        }        ElMessage.error(showMessage('网络连接异常,请稍后再试!'))      }    )  }  request(config: AxiosRequestConfig) {    return new Promise(resolve => {      this.service.request<any, AxiosResponse<IResponse>>(config).then((res: AxiosResponse<IResponse>) => {        const { data } = res        resolve(data)      })    })  }}export const request = (data: api) => {  return new Requests().request(data)}

配置解决import.meta.env报错问题

status.ts

export const showMessage = (status: number | string): string => {  let message = ''  switch (status) {    case 400:      message = '请求错误(400)'      break    case 401:      message = '未授权，请重新登录(401)'      break    case 403:      message = '拒绝访问(403)'      break    case 404:      message = '请求出错(404)'      break    case 408:      message = '请求超时(408)'      break    case 500:      message = '服务器错误(500)'      break    case 501:      message = '服务未实现(501)'      break    case 502:      message = '网络错误(502)'      break    case 503:      message = '服务不可用(503)'      break    case 504:      message = '网络超时(504)'      break    case 505:      message = 'HTTP版本不受支持(505)'      break    default:      message = `连接出错(${status})!`  }  return `${message}，请检查网络或联系管理员！`}

types.ts

// 返回res.data的interfaceexport interface IResponse {  code: number | string  result: T  message: string  status: string | number}

api接口

import { request } from '@/utils/request'enum URL {  users = '/web/v1/startup/webui/localeinfo',}export const users = () => request({ url: URL.users, method: 'get' })

报错element plus弹框引入不识别

创建element-puls.d.ts文件
完成后在script里用的弹框在ts不会报错

export {}declare global {  const ElMessage: (typeof import('element-plus'))['ElMessage']  const ElLoading: (typeof import('element-plus'))['ElLoading']}

还需要引入到同时从fig.json

使用

总结

来源地址：https://blog.csdn.net/yang20000222/article/details/132567938