【vue3基础】axios封装与用法

简单介绍axios请求和响应的封装方法，以及token验证等功能。

1. 安装

npm install axios

2. 请求与响应封装

项目中一般在公共方法的文件夹中创建 request.js 。

import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useUserStore } from '@/stores/user'

// 创建axios实例
const service = axios.create({
  baseURL: '/api', // 用于代理地址的设置，也可以写在接口上面，一般是配置在环境文件中
  timeout: 50000, // 请求超时时间
})

// 请求拦截器
service.interceptors.request.use(config => {
  const user = useUserStore()  // 存储token的仓库
  const isToken = (config.headers || {}).isToken === false
  // 判断是否需要携带token
  if (user.token && !isToken) {
    config.headers['Authorization'] = 'Bearer ' + user.token
  }
  return config
}), error => {
  return Promise.reject(error)
}

// 响应拦截器
service.interceptors.response.use(response => {
  const res = response.data
  const { code, msg } = res

  // 424报错，token失效
  if (Number(code) === 424) {
    ElMessageBox.confirm('您登陆的账号已失效, 请重新尝试', {
      confirmButtonText: '再次登录',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      // 清除token和路由信息，并返回登录页
      ...
    })
    return
  }
  // 统一报错
  if (Number(code) !== 200) {
    ElMessage({
      message: msg || '系统出错',
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(new Error(msg || 'Error'))
  }
  return res
}, error => {
  // 处理网络异常
  ElMessage({
    message: '网络异常,请稍后重试!',
    type: 'error',
    duration: 1000
  })
  return Promise.reject('Error')
})

//导出axios实例

3. 封装方法的使用

在接口文件中引入

import request from '@/utils/request'

// post传参 && 不需要token
export function login(data) {
  return request({
    url: '/user/login',
    method: 'post',
    headers: { isToken: false }, // 代表不需要token验证
    data：data
  })
}

// get请求 && 不传参
export function search() {
  return request({
    url: '/user/search',
    method: 'get',
  })
}

// get请求 && 传参
export function getList(data) {
  return request({
    url: '/user/getList',
    method: 'get',
    params: data
  })
}

4. vue文件中使用

import { getMenuList } from '@/api/接口文件.js'

onMounted(() => {
  getList()
})

const getList = async () => {
  const res = await getMenuList()
}

以上就是 axios 封装的全部功能，如果有需要补充的可以留言，如果有更好的我会补充。