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

2019-08-14 10:27:00来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

项目开发中 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
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:JavaScript数据结构——集合的实现与应用

下一篇:Javascript正则