vue3+ts+axios の単純なネットワーク リクエストのカプセル化

現在、vue3 を使用している人がほとんどですが、vue3 を使用するには TypeScript の使用が不可欠です。最近Svelte (Svelte は Web アプリケーションを構築する最新の方法を提供する人気の JavaScript フレームワークです) チームが 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<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

基本的な使い方:

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',
  })

}

上記は単純な vue3+ts パッケージです、さようなら~