Axios的Vue插件(添加全局请求/响应拦截器)

/**
 * @file Axios的Vue插件(添加全局请求/响应拦截器)
 */


// https://github.com/mzabriskie/axios
import axios from 'axios'


// 拦截request,设置全局请求为ajax请求
axios.interceptors.request.use((config) => {
  config.headers['X-Requested-With'] = 'XMLHttpRequest'


  return config
})


// 拦截响应response,并做一些错误处理
axios.interceptors.response.use((response) => {
  const data = response.data


// 根据返回的code值来做不同的处理(和后端约定)
  switch (data.code) {
    case '0':
      // 举例
      // exp: 修复iPhone 6+ 微信点击返回出现页面空白的问题
      if (isIOS()) {
        // 异步以保证数据已渲染到页面上
        setTimeout(() => {
          // 通过滚动强制浏览器进行页面重绘
          document.body.scrollTop += 1
        }, 0)
      }
      // 这一步保证数据返回,如果没有return则会走接下来的代码,不是未登录就是报错
      return data


    // 需要重新登录
    case 'SHIRO_E5001':
      // 微信生产环境下授权登录
      if (isWeChat() && IS_PRODUCTION) {
        axios.get(apis.common.wechat.authorizeUrl).then(({ result }) => {
          location.replace(global.decodeURIComponent(result))
        })
      } else {
        // 否则跳转到h5登录并带上跳转路由
        const search = encodeSearchParams({
          next: location.href,
        })


        location.replace(`/user/login?${search}`)
      }


      // 不显示提示消息
      data.description = ''
      break


    default:
  }
  // 若不是正确的返回code,且已经登录,就抛出错误
  const err = new Error(data.description)


  err.data = data
  err.response = response


  throw err
}, (err) => { // 这里是返回状态码不为200时候的错误处理
  if (err && err.response) {
    switch (err.response.status) {
      case 400:
        err.message = '请求错误'
        break


      case 401:
        err.message = '未授权,请登录'
        break


      case 403:
        err.message = '拒绝访问'
        break


      case 404:
        err.message = `请求地址出错: ${err.response.config.url}`
        break


      case 408:
        err.message = '请求超时'
        break


      case 500:
        err.message = '服务器内部错误'
        break


      case 501:
        err.message = '服务未实现'
        break


      case 502:
        err.message = '网关错误'
        break


      case 503:
        err.message = '服务不可用'
        break


      case 504:
        err.message = '网关超时'
        break


      case 505:
        err.message = 'HTTP版本不受支持'
        break


      default:
    }
  }


  return Promise.reject(err)
})


axios.install = (Vue) => {
  Vue.prototype.$axios = axios
}


export default axios

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/387117.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

05 切片、迭代、列表生成

切片 >>> L [Adam, Lisa, Bart, Paul] >>> L[0:3] #取前3个元素 >>> L[:3] >>> L[1:3] >>> L[:] >>> L[::2] #第三个参数表示每2个元素取一个元素,也就是隔一个取一个 [Adam,Bart] >>>…

一个例子彻底搞懂C++的虚函数和纯虚函数

学习C的多态性,你必然听过虚函数的概念,你必然知道有关她的种种语法,但你未必了解她为什么要那样做,未必了解她种种行为背后的所思所想。深知你不想在流于表面语法上的蜻蜓点水似是而非,今天我们就一起来揭开挡在你和虚…

利用Caffe实现mnist的数据训练

阿里云的参考文档:https://help.aliyun.com/document_detail/49571.html在文档里提供了caffe的一个案例,利用Caffe实现mnist的数据训练。准备的数据源可以在“深度学习案例代码及数据下载”页找到Caffe数据下载并解压。要训练自己的图片,还是…

06 函数式編程

1 函数式编程简介 函数:function 函数式:functional 一种编程范式 特点: 把计算视为函数而非指令 纯函数式编程:不需要变量,没有副作用,测试简单 支持高阶函数,代码简洁 Python支持的函数式…

Android SDK开发

目前我们的应用内使用了 ArcFace 的人脸检测功能,其他的我们并不了解,所以这里就和大家分享一下我们的集成过程和一些使用心得 集成 ArcFace FD 的集成过程非常简单 在 ArcFace FD 的文档上有说明支持的系统为 5.0 及以上系统,但其实在 4.4 系…

jQuery WeUI 上传

jQuery WeUI 是专为微信公众账号开发而设计的一个框架,jQuery WeUI的官网:http://jqweui.com/ 需求:需要在微信公众号网页添加上传图片功能 技术选型:实现上传图片功能可选百度的WebUploader、饿了么的Element和微信的jQuery WeUI…

07 模块

模块和包的概念 等同于java中的Package 模块名文件名(无后缀) 在文件系統中,包就是文件夾,模块就是xxx.py文件 每层包下面都有__init__.py文件 导入模块 >>> import math >>> math.pow(2, 0.5) >>…

1.rabbitmq 集群版安装及使用nginx进行四层负载均衡设置

1.安装erlang 需要注意erlang的版本是否满足rabbitmq的需求 这里用到的版本是:Erlang 19.0.4 RabbitMQ 3.6.15 wget http://www.rabbitmq.com/releases/erlang/erlang-19.0.4-1.el7.centos.x86_64.rpmrpm -ivh erlang-19.0.4-1.el7.centos.x86_64.rpm yum -y inst…

使用WEUI uploader上传图片

使用WEUI uploader上传图片&#xff0c;博主费了很大的劲总算找到完整的了&#xff0c;并且带后台接收代码&#xff0c;有需要的朋友拿去吧&#xff0c;亲测可用&#xff01; 一、html代码<link rel"stylesheet" href"https://res.wx.qq.com/open/libs/weui/…

08 面向对象编程

1 介绍 面向对象编程是一种程序设计范式 把程序看做不同对象的相互调用&#xff0c;对现实世界建立对象模型。 面向对象编程的基本思想&#xff1a; 类和实例&#xff1a; 类用于定义抽象类型 实例根据类的定义被创建出来 2 定义类并创建实例 类通过class关键字定义&…

H5+jqweui实现手机端图片压缩上传 Base64

H5jqweui实现手机端图片压缩上传主要功能&#xff0c;使用H5的formData上传base64格式的图片&#xff0c;canvas压缩图片&#xff0c;前端样式使用weui&#xff0c;为方便起见&#xff0c;使用了jquery封装过的weui&#xff0c;jqweui。话不多少&#xff0c;开始上代码。前端代…

09 类的继承

继承一个类 class Person(object): def __init__(self, name, gender): self.name name self.gender gender class Student(Person): def __init__(self, name, gender, score): super(Student, self).__init__(name, gender) self.score score 判断类型 isinstance()可以…

vue 中v-if 与v-show 的区别

相同点或者说功能&#xff0c;都可以动态操作dom元素的显示隐藏 不同点&#xff1a; 1.手段&#xff1a;v-if是动态的向DOM树内添加或者删除DOM元素&#xff1b;v-show是通过设置DOM元素的display样式属性控制显隐&#xff1b;2.编译过程&#xff1a;v-if切换有一个局部编译/卸…

vue打包后放在 nginx部署时候的配置文件

部署了三套程序,默认的&#xff0c;admin和design#user nobody; worker_processes 1;#error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info;#pid logs/nginx.pid;events {worker_connections 1024; }http {include …

淘淘商城之技术选型、开发工具和环境、人员配置

一、技术选型 1&#xff09;Spring、SpringMVC、Mybatis 2&#xff09;JSP、JSTL、jQuery、jQuery plugin、EasyUI、KindEditor&#xff08;富文本编辑器&#xff09;、CSSDIV 3&#xff09;Redis&#xff08;缓存服务器&#xff09; 4&#xff09;Solr&#xff08;搜索&#x…

启动代码格式:nginx安装目录地址 -c nginx配置文件地址

启动启动代码格式&#xff1a;nginx安装目录地址 -c nginx配置文件地址 例如&#xff1a;[rootLinuxServer sbin]# /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf停止nginx的停止有三种方式&#xff1a; 从容停止1、查看进程号[rootLinuxServer ~]# ps -ef…

Lecture 3 Divide and Conquer

1.Divide the problem(instance) into one or more sub-problem; 2.Conquer each sub-problem recursively; 3.Combine solutions.

Maven报错找不到jre

富人之所以越来越富&#xff0c;穷人之所以越来越穷&#xff0c;中产阶级之所以总是在债务泥潭中挣扎&#xff0c;其主要原因之一在于他们对金钱的观念不是来自学校&#xff0c;而是来自家庭。 ---《穷爸爸富爸爸》 一、报错提示 常规配置maven环境变量&#xff0c;报错&#x…

vue按照url地址访问出错404

问题描述&#xff1a; 最近在开发cms的时候使用Vue.js框架&#xff0c;利用vue-route结合webpack编写了一个单页路由项目&#xff0c;自己在服务器端配置nginx。部署完成后&#xff0c;访问没问题&#xff0c;从页面中点击跳转也没问题&#xff0c;但是只要点击刷新或通过浏览器…