vue3中axios的基本封装

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第14天，点击查看活动详情

1. 封装一个文件 里面是axios基本的请求地址和超时时间

let BASE_URL = ''
const TIME_OUT = 3000

// 2.根据process.env.NODE_ENV区分
// 开发环境: development
// 生成环境: production
// 测试环境: test
if (process.env.NODE_ENV === 'development') {
  BASE_URL = '/api'
} else if (process.env.NODE_ENV === 'production') {
  BASE_URL = 'http://production.org/prod'
} else {
  BASE_URL = 'http://test.org/test'
}

export { BASE_URL, TIME_OUT }

1. 根据process.env.NODE_ENV的不同值来区分不同的环境，当然也可以创建三个不同的文件来区分，这样的话在不同环境会自动执行相应文件下的内容

2. 基础模板在以上文件定义了变量**VUE_APP_BASE_API，该变量可以作为axios请求的**baseURL****

文件内容类似这样

VUE_APP_BASE_URL=https://development.org/dev
VUE_APP_TIME_OUT=3000

2. 封装一个基本的axios

主要是设置了一下全局的请求拦截器和响应拦截器，并且设置loading，可以通过请求参数来关闭loading，使用啦element-plus，不用可以删掉，只保留最基本的，使用的话需要下载，并引入

import { BASE_URL, TIME_OUT } from './config'
import localCache from '../utils/localCache.ts'
import axios from 'axios'
import { ElLoading } from 'element-plus' // element-plus 不用可去掉，用的话需要下载
import { ElMessage } from 'element-plus'

const instance = axios.create({
  baseURL: BASE_URL,
  timeout: TIME_OUT,
  showLoading: true
})
let loading
// 请求拦截器
instance.interceptors.request.use(
  (config) => {
    // console.log(config, '请求拦截器')
    const token = localCache.getCache('Vtoken')
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    if (config.showLoading) { // 设置请求时的loading，默认开启，可以通过传入参数来关闭
      loading = ElLoading.service({
        lock: true,
        text: '正在请求数据，请稍后......',
        background: 'rgba(f,f,f.2)'
      })
    }
    return config
  },
  (err) => {
    // console.log(err, '请求拦截器的err')
    console.log(err)
    ElMessage.error(err.message) // 提示错误信息
    return Promise.reject(err) // 请求错误让请求走到catch而不是then
  }
)

// 响应拦截器
instance.interceptors.response.use(
  (res) => {
    // console.log(res, '响应拦截器')
    // let data = res.data
    loading?.close() // 请求成功关闭loading
    return res.data
  },
  (err) => {
    loading?.close() // 请求失败关闭loading
    if (err && err.response) {
      switch (err.response.status) {
        case 400:
          err.message = err.response.data
          break
        case 401:
          err.message = '授权失败，请重新登录'
          break
        case 403:
          err.message = '拒绝访问'
          break
        case 404:
          err.message = '请求错误未找到该资源'
          break
        case 500:
          err.message = '服务端出错'
          break
      }
    } else {
      err.message = '连接服务器出错'
    }
    ElMessage.error(err.message)
    // console.log(err, '响应拦截器err')
    return Promise.reject(err && err.response) // 请求错误让请求走到catch而不是then
  }
)

注释都写在代码里面了，比较方便看，然后里面有一个本地存储的文件，就是localCache.js，下面是代码。

class localCache {
  // 设置值
  setCache(key:string, value:any) {
      localStorage.setItem(key, JSON.stringify(value))
  }
  // 得到值
  getCache(key: string) {
    const value = window.localStorage.getItem(key)
    if (value) {
      return JSON.parse(value)
    }
  }
  // 清除值
  removeCache(key:string) {
    window.localStorage.removeItem(key)
  }
  // 清除所有
  clearAllCache() {
    window.localStorage.clear()
  }
}

export default new localCache() // 导出一个对象实例

3. 使用

import request from '@/newService/index.js'

// 登录接口

export const accountLogin = (data: object) => {
  return request({
    url: "/login",
    data,
    method: 'POST',
    // showLoading:false // 是否需要添加请求时的loading
  })
}

因为在请求的时候在全局设置了loading，所以在请求时不想要loading的话，可以在请求时在一个请求参数 showLoading 来关闭loaidng