先创建request.js
// 引入依赖import axios from 'axios';// 看实际需要import { Message, Loading, MessageBox } from 'element-ui';
创建axios实例
const request = axios.create({headers: {'Content-Type': 'application/json;charset=UTF-8',},timeout: 500000, // 请求超时时间});
请求拦截器
发送请求之前运行一般会判断是否有token，如果token存在则在请求头加上这个token。服务端会判断我这个token是否过期。可以设置加载全局loading。
// loading函数// 记录请求次数let needLoadingRequestCount = 0;let loading;function startLoading() {loading = Loading.service({lock: true,text: '加载中……',background: 'rgba(0, 0, 0, 0.5)',});}function endLoading() {// 延迟500ms，防止网速特快加载中画面一闪而过setTimeout(function () {if (loading) loading.close();}, 500);}// 打开loadingfunction showFullScreenLoading() {if (needLoadingRequestCount === 0) {startLoading();}needLoadingRequestCount++;}// 关闭loadingfunction tryHideFullScreenLoading() {if (needLoadingRequestCount <= 0) return;needLoadingRequestCount--;if (needLoadingRequestCount === 0) {endLoading();}}
// request拦截器request.interceptors.request.use((config) => {// 打开loadingshowFullScreenLoading();const token = localStorage.getItem('token');if (token) {// 判断是否存在token，如果存在的话，则每个http header都加上tokenconfig.headers.authorization = token; //请求头加上token}return config;},(error) => {// 关闭loadingtryHideFullScreenLoading();// Do something with request errorPromise.reject(error);},);
响应拦截器
对服务端返回的数据进行处理，存储token，错误处理、登录、登录失效路由跳转、关闭全局loading等。
// respone拦截器request.interceptors.response.use((response) => {// 关闭loadingtryHideFullScreenLoading();const res = response.data;if (!res.success) {// B002:Token 过期了;if (res.code === 'B002') {// 最后一次出弹框if (needLoadingRequestCount === 0) {MessageBox.confirm(`你已被登出，可以取消继续留在该页面，或者重新登录, 确定登出`,{confirmButtonText: '重新登录',cancelButtonText: '取消',type: 'warning',},).then(() => {// 返回登录页// ...做些事情// 为了重新实例化vue-router对象 避免buglocation.reload();});}} else {Message({message: res.msg,type: 'error',});}return Promise.reject(res.msg || 'error');} else {// 如果存在tokenlet token = response.headers.authorization;if (token) {localStorage.setItem('token', token);}return response.data;}},(error) => {// 关闭loadingtryHideFullScreenLoading();Message({message: error,type: 'error',duration: 2000,});return Promise.reject(error);},);
导出实例
export default request;
创建api.js
import request from './request';/* 验证登陆 */export function login(data) {return request.post('/login', data);}
