vue 拦截器使用

一，背景，

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：

从浏览器中创建 XMLHttpRequest
从 node.js 发出 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防止 CSRF/XSR

二，场景

     每次都要在请求中加入，token ，判断是否登陆，如果vue系统中，所有的请求都加入token，比较麻烦，

有没有，每次发送求加入，vue 提供了一种方法，拦截器

三，使用与配置

  在config 中，加入  axios.js

import axios from 'axios'

// 配置默认的host,假如你的API host是：http://api.htmlx.club
  

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
　　// 在发送请求之前做些什么
if (window.localStorage.getItem('access-token')) {
    config.headers.Authorization = window.localStorage.getItem('access-token');
}
console.log(window.localStorage.getItem('access-token'));
　　return config
}, function (error) {
　　// 对请求错误做些什么
return Promise.reject(error)
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
　　// 对响应数据做点什么
　　return response
}, function (error) {
　　// 对响应错误做点什么
　　return Promise.reject(error)
});

 

 

四，在 main.js 加入配置

import axios from 'axios';
import '../config/axios'
Vue.prototype.$ajax = axios