拦截器的作用

在每次请求后台的时候携带token等参数。
在响应时检查token是否需要移除、更新和统一响应等。

配置步骤

创建http.js

全局参数配置

// 引入axios
import axios from 'axios'; //设置请求超时
axios.defaults.timeout = 10000;
axios.defaults.withCredentials = true//请求头设置
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

请求拦截器

// 请求拦截器
axios.interceptors.request.use(    config => {        // 从本地存储中获取token，携带在header中const token = localStorage.token;const openId = localStorage.id    token && (config.headers.Authorization = 'Bearer' +' ' + token);    openId && (config.headers.openId = openId); return config;    },    error => {        return Promise.error(error);    }
)

响应拦截器

// 响应拦截器
axios.interceptors.response.use(    response => {   // 统一定义状态码为200时，表示请求成功，其他请求失败if (response.status === 200) {            return Promise.resolve(response);        } else {            return Promise.reject(response);        }    },    // 可根据错误响应码判断状态，做出相应的处理error => {            if (error.response.code) {            switch (error.response.code) {                // 401: 未登录// 未登录时跳转登录界面，登录成功后回调登录前被拦截的地址 query.redirectcase 401:                    router.replace({                        path: '/toLogin',                        query: { redirect: router.currentRoute.fullPath }});break;// 403 token过期// 清空本地存储的token，跳转登录界面case 403:Toast({message: '登录过期，请重新登录',duration: 1000,forbidClick: true});// 清除tokenlocalStorage.removeItem('token');store.commit('loginSuccess', null);// 登录成功后回调登录前被拦截的地址 query.redirectsetTimeout(() => {                        router.replace({                            path: '/login',                            query: { redirect: router.currentRoute.fullPath }                        });                    }, 1000);                    break; // 404请求不存在case 404:Toast({message: '网络请求不存在',duration: 1500,forbidClick: true});break;// 其他错误，弹出对应的响应信息default:Toast({message: error.response.data.message,duration: 1500,forbidClick: true});}return Promise.reject(error.response);}}    
);

对get、post、及表单提交的请求封装

get 请求

export function get(url, params){    return new Promise((resolve, reject) =>{        axios.get(url, {            params: params        }).then(res => {resolve(res.data);}).catch(err =>{reject(err.data)        })    
});}

post 请求

export function post(url, params) {return new Promise((resolve, reject) => {axios.post(url, QS.stringify(params)).then(res => {resolve(res.data);}).catch(err =>{reject(err.data)})});
}

post from 请求

export function postForm(url, params) {return new Promise((resolve, reject) => {axios.post(url, (params)).then(res => {resolve(res.data);}).catch(err =>{reject(err.data)})});
}

项目使用

创建一个api.js，对请求方法做进一步封装

import { get, post, postForm } from './http'export const login = p => post('user/login', p);export const deleteUser = p => postForm('user/delete', p);

实际方法调用

import {login} from '../request/api'
login({'username':this.ruleForm.name,'password':this.ruleForm.paw}).then(res=>{console.log(res)if (res.code == 0) {// 根据token获取用户信息} else {this.message = res.data}}).catch({})