• 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

  • 相关阅读:
    百度地图API地理位置和坐标转换
    WebClient 通过get和post请求api
    C#模拟POST提交表单(二)--HttpWebRequest以及HttpWebResponse
    C#模拟POST提交表单(一)--WebClient
    百度外卖接口调试 C#版
    DWZ(JUI) 教程 跨域请求 iframeNavTab
    订餐系统之同步美团商家订单
    订餐系统之同步饿了么商家订单
    外卖订单爬虫(美团,饿了么,百度外卖)
    订餐系统之获取淘宝外卖订单
  • 原文地址:https://www.cnblogs.com/bradleyxin/p/12894222.html
Copyright © 2020-2023  润新知