vue中axios请求封装

Posted 江湖小菜--

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue中axios请求封装相关的知识,希望对你有一定的参考价值。

在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部署codewhyaxios

以上是关于vue中axios请求封装的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段14——Vue的axios网络请求封装

回归 | js实用代码片段的封装与总结(持续更新中...)

vue中axios请求成功了如何把数据渲染到页面上?

把axios封装为vue插件使用

vue中axios请求封装

vue中axios请求封装