Axios拦截器的简单应用方法(vue/cli)

Axios

附上:
axios中文网
http://www.axios-js.com/
vue/cli 文档
https://cli.vuejs.org/

在vue/cli脚手架项目里简单应用axios

1. 首先要下载安装axios-------------- npm install axios –save
   [cmd命令行内运行]
   

2. 然后在main.js中引入文件---------- import axios from ‘axios’
   [main.js文件中]
   
   3.然后你就可以全局使用this.axios来调用引入的axios方法了.

好吧,其实上面只是简单的直接引用axios，还没涉及到拦截器

Axios拦截器

首先拦截器分为两种:

1. 请求拦截器(request)
2. 响应拦截器(response)

request请求拦截器：
发送请求前统一处理，如：设置请求头headers、应用的版本号、终端类型等。
response响应拦截器：
有时候我们要根据响应的状态码来进行下一步操作，例如：由于当前的token过期，接口返回401未授权，那我们就要进行重新登录的操作（如跳转回登陆界面）

下面我通过从零开始配置axios拦截器，来熟悉一下拦截器的部分用法

下载安装axios

还是先要下载安装axios-------------- npm install axios –save
[cmd命令行内运行]

创建文件

我们可以在先创建一个utils文件夹，然后在里面创建一个名为axiosInterceptors.js的文件

PS：
这里不创建也可以，直接在main.js里写（建议单独写个js文件方便查看修改）

引入你需要涉及到的文件（axiosInterceptors.js）

import Vue from 'vue' 
import axios from "axios";
import router from "../router";

// 这里我只是简单的应用，所以只引入了这些

创建axios实例（axiosInterceptors.js）

设置请求拦截（axiosInterceptors.js）

Login.vue

这里是指在上文中提到的用户登陆时设置在cookie的token，token保存的方法有很多，这里只是以保存在cookie为例

if (data && data.code === 0) { // 登陆成功返回code为0
      this.$cookie.set("token", data.token);
       // Do something
}

设置响应拦截（axiosInterceptors.js）

在main.js中导入设置了拦截器axios (main.js)

import axios from '@/utils/axiosInterceptors
// 挂载全局

Vue.prototype.$axios = axios // ajax请求方法

组件中使用

 this.axios.post("users/v1/login",{ // 相对地址
// 携带的参数,由于创建axios实例时Content-Type的设置,
//这里会是json格式传输  
params:{ 
    uname:this.ruleForm.username,
    upwd:this.ruleForm.password
  }
}).then(result=>{
	//请求的结果,这里是经过了响应拦截器后的
  console.log(result)
})

最后附上axiosInterceptors.js源码

import Vue from "vue";
import axios from "axios";
import router from "../router";

const api = "http://127.0.0.1:3000"; // 配置基础请求域名
//创建一个axios实例，并导出
export const instance = axios.create({
  // `baseURL` 将自动加在 `url`(axios发出的请求地址) 前面，除非 `url` 是一个绝对 URL。
  baseURL: api, //所有请求地址,自动携带api前缀地址
  //配置请求头
  headers: {
    //提交的数据按照 key1=val1&key2=val2 的方式进行编码，key 和 val 会进行了 URL 转码
    // 'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8',

    //作为请求头，用来告诉服务端提交的数据（消息主体）是序列化后的 JSON 字符串
    "Content-Type": "application/json;charset=utf-8"
  },
  timeout: 30000, //设置网络超时
  withCredentials: true //请求头是否带cookie
});

/**
 * 请求拦截
 */
instance.interceptors.request.use(
  config => {
    // Do something before request is sent
    config.headers["token"] = Vue.cookie.get("token"); // 请求头带上token
    //这里的token是在用户登录时, 通过this.$cookie.set("token", data.token)设置的
    return config;
  },
  function(error) {
    // Do something with request error
    return Promise.reject(error);
  }
);

/**
 * 响应拦截
 */

instance.interceptors.response.use(
  response => {
    switch (response.data.code) {
      case 400: // 401, 用户未登录
        router.push("/login"); //未登录时，让路由跳转至登陆界面
        return;
      case 401: // 401, token失效
        //Do someting here
        //清除用户信息，如Vue.cookie.delete('token')，重置store等操作
        Vue.cookie.delete("token"); // 这里就以简单的清除cookie中的token为例
        router.push("/login"); // token失效时，返回登陆界面
        return;
      default:
        //200，正常响应
        //Do someting here
        return response; // 返回响应回来的数据，使请求正常接收（放行，让响应通过拦截器）
    }
  },
  error => { //响应错误时
    router.push("/login"); // 返回登陆页面
    return Promise.reject(error);
  }
);