Simple network request encapsulation of vue3+ts+axios

At present, most people use vue3, and the use of TypeScript is definitely indispensable for using vue3. Although the recent Svelte (Svelte is a popular JavaScript framework that provides a modern way to build web applications) team decided to stop supporting TypeScript, this decision has caused a lot of developer attention and discussion. But for us ordinary developers, it has little impact so far, and we still have to learn.

Without further ado, let's go to the code:

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

Basic use:

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

}

The above is the simple vue3+ts package, bye~

Simple network request encapsulation of vue3+ts+axios

Guess you like