Encapsulación de solicitud de red simple de vue3+ts+axios

Actualmente, la mayoría de la gente usa vue3, y el uso de TypeScript es definitivamente indispensable para usar vue3. Aunque el equipo reciente de Svelte (Svelte es un marco de JavaScript popular que proporciona una forma moderna de crear aplicaciones web) decidió dejar de admitir TypeScript, esta decisión ha llamado mucho la atención y el debate de los desarrolladores. Pero para nosotros, los desarrolladores ordinarios, tiene poco impacto hasta ahora y todavía tenemos que aprender.

Sin más preámbulos, vamos al código:

import type { AxiosRequestConfig, AxiosResponse } from 'axios'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import 'element-plus/es/components/message/style/css'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

NProgress.configure({showSpinner: false}) // NProgress Configuration

interface statusCode {
  [propName: number]: string
}

const statusCode: stautsCode = {
  200: '服务器成功返回请求的数据',
  201: '新建或修改数据成功。',
  202: '一个请求已经进入后台排队（异步任务）',
  204: '删除数据成功',
  400: '请求错误(400)',
  401: '未授权，缺少令牌',
  403: '拒绝访问(403)',
  404: '请求出错(404)',
  408: '请求超时(408)',
  500: '服务器错误(500)',
  501: '服务未实现(501)',
  502: '网络错误(502)',
  503: '服务不可用(503)',
  504: '网络超时(504)'
}

const http = axios.create({
  baseURL: import.meta.env.VITE_APP_BASE_API,
  timeout: 5000
})

// 请求拦截器
http.interceptors.request.use(
    (config: AxiosRequestConfig) => {
      NProgress.start() // 进度条
      // todo
      return config
    },
    (error) => {
      return Promise.reject(error)
    }
)

// 响应拦截器
http.interceptors.response.use(
    (response: AxiosResponse) => {
      NProgress.done()
      // todo
      return response.data
    },
    (error) => {
      NProgress.done()
      const response = Object.assign({}, error.response)
      response && ElMessage.error(statusCode[response.status] || '系统异常, 请检查网络或联系管理员！')
      return Promise.reject(error)
    }
)

interface responseData<T> {
  code: number;
  data: T;
  msg: string;
}


const request = <T = unknown>(config: AxiosRequestConfig): Promise<responseData<T>> => {
  return new Promise((resolve, reject) => {
    http
        .request<T>(config)
        .then((res: AxiosResponse) => resolve(res.data))
        .catch((err: { message: string }) => reject(err))
  })
}

export default request

Uso básico:

import request from '@/utils/request'
import type { dataType, loginData, userType } from './type.d.ts'

/**
 * @description: 用户登录
 * @params data
 */
export const loginAPI = (data: loginData) => {
  return request<dataType>({
    url: '/user/login', // mock接口
    method: 'post',
    data,
  })
}

/**
 * @description: 获取用户信息
 * @returns
 */
export const userInfo = () => {
  return request<userType>({
    url: '/user/info', // mock接口
    method: 'get',
  })

}

Lo anterior es el paquete simple vue3+ts, bye~