vue 拦截器使用
一,背景,axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:从浏览器中创建 XMLHttpRequest从 node.js 发出 http 请求支持 Promise API拦截请求和响应转换请求和响应数据取消请求自动转换JSON数据客户端支持防止 CSRF/XSR二,场景每次都要在请求中加入,toke...
·
一,背景,
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
更多推荐
已为社区贡献1条内容
所有评论(0)