axios用法總結

班主任發表於2019-11-21
iOS

axois 的封裝

// 安裝axios
npm install axios;

// 引入
import axois from 'axios'; // 引入axois模組
import QS from 'qs'; // 引入qs模組，用來序列化post型別資料
複製程式碼
  • 環境切換
// 環境切換
if (process.env.NODE_ENV === 'development') {
    axios.defaults.baseURL = 'http://www.baidu.com';
} else if (process.env.NODE_ENV === 'debug') {
	axios.defaults.baseURL = 'http://www.ceshi.com';  
} else if (process.env.NODE_ENV === 'production') {
   axios.defaults.baseURL === 'http://www.procduction';
} 
複製程式碼
  • 設定請求超時
axios.defaults.timeout = 10000; // 請求超過10s，告知使用者請求超時
複製程式碼
  • post請求頭
    • post請求的時候，需要加上一個請求頭，所以可是設定一個預設設定，即post請求頭如下
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; chartset=UTF-8';
複製程式碼

攔截請求

  • 我們在進行請求前可以進行一個請求的攔截，比如有且請求是登入之後才能訪問的，或者是post請求的時候，我們需要序列化資料，這時候就需要在傳送請求之前進行一個攔截。

request請求攔截

// 先匯入vuex，因為要使用裡面的狀態物件
// vuex的路徑
import store from '@/store/index';

// 請求攔截
axios.interceptors.request.use(
	config => {
        // 每次傳送請求之前重新整理vuex中是否存在token
        // 如果存在，則統一在http的請求頭header中新增token，後臺根據token判斷登入情況
        // 即使本地存在token,token也可能是過期的，所以響應請求中，要對返回的裝填進行判斷
        const token = store.state.token;
        token&&(config.headers.Authorization = token);
        return config;
    },
    
    error => {
        return Promise.error(error);
    },
);

複製程式碼
  • 一般登入完成之後，將使用者的token通過localStorage或者cookie存在本地，然後在每次進入頁面的時候，（即在main.js中），會首先從本地儲存中讀取token,如果token存在，說明使用者登入過，則更新vuex中token的狀態，然後在每次請求的時候在header中帶token.

response 響應攔截

// 響應攔截
axios.interceptors.response.use(
	response => {
        // 如果狀態碼為200，介面請求成功，否則丟擲錯誤
        if (response.status === 200) {
            return Promise.resolve(response);
        } else {
            return Promise.reject(response);
        }
    },
    // 可以跟後臺的開發人員，協商好統一的錯誤狀態碼
    error => {
        if (error.response.status) {
            switch (error.response.status) {
                // 401: 未登入，跳轉到登入頁面
                case 401:
                    router.replace({
                        path: '/login',
                        query: {
                            redirect: router.currentRoute.fullPath
                        }
                    });
                    break;
                case 403:
                    /**
                     * 提示登入過期
                     */
                    // 清除localStorage中的token
                    localStorage.removeItem('token');
                    store.commit('loginSuccess', null);
                    // 跳轉到登入頁面，並要瀏覽頁面的fullPath傳過去，登入成功後需要訪問的頁面
                    setTimout(() => {
                        router.replace({
                            path: '/login',
                            query: {
                                redirect: router.currentRpute.fullPath;
                            }
                        });
                    }, 1000);
                    break;
                case 404:
                    /**
                     * 提示請求頁面不存在
                     */
                    break;
                default:
                    /**
                     * 丟擲錯誤異常，
                     */
            }
            return Promise.reject(error.response);
        }
    },
);
複製程式碼
  • 封裝get
/**
 * get方法，對應get請求
 * @param {String} url [請求的url地址]
 * @param {Object} params [請求時攜帶的引數]
 */
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請求
/** 
 * post方法，對應post請求 
 * @param {String} url [請求的url地址] 
 * @param {Object} params [請求時攜帶的引數] 
 */
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);
        });
        
    });
}
複製程式碼

axios.get()方法和axios.post() 在提交引數的時候寫法是不同的，get的第二個引數是一個{}， 然後這個物件的params還是一個物件，而post的第二個引數就是一個引數物件，兩者略有差別

相關文章