三、VUE项目BaseCms系列文章：axios 的封装

刺骨的言语ヽ痛彻心扉 2021-10-23 11:14 113阅读 0赞

项目开发中 ajax 是不可缺少的，一个好的封装可以减少我们很多的重复代码，维护也更方便。在 vue 开发中我们用的比较多的就是 axios。下面代码是项目中用到的 axios 的封装。

http.js

/**
     * 描述: axios封装，方便使用
     */
    
    import axios from 'axios'
    import router from '../router'
    import { Message } from 'element-ui'
    
    // 提示
    const tip = msg => Message.error(msg)
    
    // 跳转到登录页
    const toLogin = () => {
      router.replace({
        path: '/login',
        query: { redirect: router.currentRoute.fullPath }
      })
    }
    
    // 错误统一处理
    const errorHandle = (status, other) => {
      switch (status) {
        // 未授权，请登陆
        case 401:
          toLogin()
          break
    
        // 登录过期，清除token，跳转到登录页
        case 403:
          tip('登录过期，请重新登录！')
          localStorage.removeItem('token')
          setTimeout(() => { toLogin() }, 1000)
          break
    
        // 未找到资源
        case 404:
          tip('请求的资源不存在！')
          break
    
        // 其他状态码
        default:
          console.log(other)
      }
    }
    
    // 实例对象
    let instance = axios.create({
      timeout: 6000,
      headers: { 'Content-Type': 'application/json' }
    })
    
    // 请求拦截器
    instance.interceptors.request.use(
      config => {
        // 登录流程控制中，根据本地是否存在token判断用户的登录情况
        // 但是即使token存在，也有可能token是过期的，所以在每次的请求头中携带token
        // 后台根据携带的token判断用户的登录情况，并返回给我们对应的状态码
        // 而后我们可以在响应拦截器中，根据状态码进行一些统一的操作。
        const token = localStorage.getItem('token')
        token && (config.headers.Authorization = token)
        return config
      },
      error => Promise.error(error)
    )
    
    // 响应拦截器
    instance.interceptors.response.use(
      // 请求成功
      res => {
        if (res.data.code === 200) {
          return Promise.resolve(res)
        } else {
          tip(res.data.message)
          return Promise.reject(res)
        }
      },
    
      // 请求失败
      error => {
        const { response } = error
        if (response) {
          // 请求已发出，但状态码不在 2XX 的范围
          errorHandle(response.status, response.data.message)
          return Promise.reject(response)
        } else {
          tip('请求未响应，超时或断网！')
          return Promise.reject(error)
        }
      }
    )
    
    export default instance

注：

1. 上面代码依赖了 elementui 框架的 Message 组建，用于提示错误消息

2. 之所以没有为 实例对象 instance 配置 baseUrl，是为了防止有多个不同服务的情况。

转载于:https://www.cnblogs.com/similar/p/11030184.html