• 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
        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

  • 相关阅读:
    原生ES-Module在浏览器中的尝试
    常见的web攻击总结
    node第三方模块----nodemailer发送邮件
    08----mockjs处理前端传来的路径,获取?后面的值
    07----mockjs获取前端传递的数据
    05-----Mock.Random 扩展方法
    03----Mock.mock() 生成接口,随机数据
    06----Mock.setup()
    十一. for of
    十.数组解构
  • 原文地址:https://www.cnblogs.com/bradleyxin/p/12894222.html
Copyright © 2020-2023  润新知