解决方案:
// 请求发前拦截,header中添加token axios.interceptors.request.use(res => { res.headers.common['X-Token'] = storage.get('token') || '' return res; });
非常简单,使用axios的拦截器,发送请求前从缓存中读取,没有则为空 (重要)。
官网方法:
axios.interceptors.request.use(function (config) { // 在发送请求之前做些什么 return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); });
我的问题:
我封装了一个基于axios的http类(欢迎补充):
import axios from 'axios' import storage from '../utils/storage' import Vant from 'vant' // import qs from 'qs' import { config } from './config' const tips = { 1: '抱歉,出现了一个错误' } var instance = axios.create({ baseURL: config.base_url }); // 中文乱码解决 // instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'; // 请求发起前拦截 使用qs序列化字符串,处理发送请求的参数 // 请求发前拦截,header中添加token instance.interceptors.request.use(res => { res.headers.common['X-Token'] = storage.get('token') || '' return res; }); class Http { // get 请求 get(url, params) { const result = instance.get(url, { params: params }) result.then(res => { if (res.data.message) { Vant.Toast.fail(res.message) } }) return result } //post 请求 post(url, params) { const result = instance.post(url, params) result.then(res => { // 请求打印出来 debug console.log(res) if (res.data.message) { Vant.Toast.fail(res.data.message) } }) return result } // 发送 字符串类型 postStr(url, params) { const headers = { 'Content-type': 'application/x-www-form-urlencoded' } return instance.post(url, params, headers) } // 并发请求 all(array, callback) { instance.all(array) .then(axios.spread(function (acct, perms) { callback({ acct, perms }) // 两个请求现在都执行完成 })); } // 展示良好的错误提示 show_error(error_code) { if (!error_code) { error_code = 1 } const tip = tips[error_code] Vant.Toast.fail(tip) } } export { Http }