vue中axios请求封装

Posted 2021-02-19 江湖小菜--

在vue的学习中总结的对于axios的请求封装，方便日后使用进行总结归纳，存在部分待验证的内容

// axios封装
import axios from ‘axios‘

// 创建axios实例
const serviceRequset = axios.create({
  // 设置超时时间
  timeout: 5000,
  // 设置请求的基本路径
  baseURL: process.env.BASE_URL
})

/**
 * 请求前拦截
 * 用于处理需要在请求前的操作
 *  */
serviceRequset.interceptors.request.use(config => {
  // 请求成功
  const token = localStorage.getItem(‘token‘)
  // 根据接口是否需要token登陆验证决定是否保留
  if (token) {
    config.headers.Authorization = token
  }
  return config
}, err => {
  // 请求失败,返回错误信息
  // console.log(err)
  return Promise.reject(err)
})

// 响应后拦截
serviceRequset.interceptors.response.use(response => {
  // 根据实际情况定义变量值
  const responseCode = response.status
  // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
  // 否则的话抛出错误
  if (responseCode === 200) {
    // 两种写法貌似皆可（待验证）
    // 1、 return response
    // 2、return Promise.resolve(response)
  } else {
    console.log(response)
    return Promise.reject(response)
  }
}, err => {
  // 断网或者请求超时状态
  if (!err.response) {
    // 请求超时
    if (err.message.include(‘timeout‘)) {
      console.log(‘请求超时‘)
    } else {
      console.log(‘断网了‘)
    }
  }
  // 服务器返回不是2开头的情况，则进入失败情况判断
  // 根据接口返回的错误状态码进行不同的错误情况处理
  console.log(err)
  // 根据实际情况定义变量值
  const responseCode = err.response.status
  switch (responseCode) {
    // 401：未登录
    case 401:
      // 跳转到登陆页
      break
    // 404：请求不存在
    case 404:
      // 提示网页不存在
      break
    default:
      // 其他错误，直接抛出错误提示
      break
  }
  // 抛出错误
  return Promise.reject(err)
})

export default serviceRequset

参考文章：vue-cli3 项目从搭建优化到docker部署、codewhy、axios