vue3+ts+axios的简单网络请求封装

目前，使用vue3的应该是大部分人了，使用vue3肯定少不了对于TypeScript的使用。虽然说最近Svelte（Svelte是一种流行的JavaScript框架，它提供了一种现代化的方式来构建Web应用程序）团队决定停止对TypeScript的支持，这一决定引起了很多开发者的关注和讨论。但是对于我们普通开发者来说目前为止影响不大，该学习还是得学。

废话少说，上代码：

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 {
  code: number;
  data: T;
  msg: string;
}


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

export default request

基本使用：

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

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

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

}

以上就是简单的vue3+ts的封装啦，bye~