配置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({

            })