配置axios全局拦截器

目录

• 拦截器的作用
• 配置步骤
  • 全局参数配置
  • 请求拦截器
  • 响应拦截器
  • 对get、post、及表单提交的请求封装
• 项目使用

拦截器的作用

在每次请求后台的时候携带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.redirect
                case 401:                    
                    router.replace({                        
                        path: '/toLogin',                        
                        query: { 
                            redirect: router.currentRoute.fullPath 
                        }
                    });
                    break;

                // 403 token过期
                // 清空本地存储的token，跳转登录界面
                case 403:
                     Toast({
                        message: '登录过期，请重新登录',
                        duration: 1000,
                        forbidClick: true
                    });
                    // 清除token
                    localStorage.removeItem('token');
                    store.commit('loginSuccess', null);
                    // 登录成功后回调登录前被拦截的地址 query.redirect
                    setTimeout(() => {                        
                        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({

            })