axios封裝(使用了element-ui的消息提示)


/** Axios請求
 * @Author: xuhong
 * @Date: 2020/6/19
 * @DESC: //TODO
 */

import axios from 'axios';
import baseUrl from "./config";
import {Message} from 'element-ui'

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

/**
 * 發送請求,處理請求失敗
 *
 * request(url, method, data, callback)
 * request(url, method, callback)
 * request(url, callback)
 *
 * @param url
 * @param method 默認get
 * @param data
 * @param callback - 需要一個參數接收返回的數據
 *
 * @return 返回的數據,正常情況有返回,否則沒有
 */
async function request(url, method = 'get', data, callback) {
    if (typeof data == 'function') {
        callback = data;
        data = '';
    }
    if (typeof method == 'function') {
        callback = method;
        method = 'get';
    }

    // axios配置 - 公共配置
    const instance = axios.create({
        baseURL: baseUrl, // 基礎URL, 需要服務端處理跨域問題
        timeout: 5000, // 超時時間
    });

    // 攔截器處理完成后需要放行
    // 請求攔截器
    instance.interceptors.request.use((config) => {
        // 全局添加calcelToken
        config.cancelToken = source.token;

        // 攜帶token
        config.headers.Authorization = localStorage.loginData ? JSON.parse(localStorage.loginData).token : '';
        return config;
    }, (err) => {
        Message.error({message: '連接不到服務器,請稍后再試', offset: 150});
        console.log('連接不到服務器,請稍后再試');

        return false;
    });
    // 響應攔截器
    instance.interceptors.response.use((res) => {
        if (res.status && res.status == 200) {
            if (res.data.code == 200) {
                !callback || callback(res.data.data);
                return res.data.data ? res.data.data : true;

                // 登錄失效
            } else if (res.data.code == 3001) {
                // 重新獲取token
                (async function () {
                    let token = await request('/userAccount/updateToken');
                    if (token) {
                        let loginData = JSON.parse(localStorage.loginData);
                        loginData.token = token;
                        localStorage.loginData = JSON.stringify(loginData);
                        location.reload();

                        // 取消其它進行的請求
                        source.cancel();
                    }
                })();
            } else {
                Message.error({message: res.data.message, offset: 150});
                console.log(res.data.message);
            }
        } else {
            // 請求失敗
            Message.error({message: '請求失敗,請稍后再試', offset: 150});
        }
        return false;
    }, (err) => {
        Message.error({message: '服務器異常,請稍后再試', offset: 150});
        console.log('服務器異常,請稍后再試');
        return false;
    });

    // 發送請求
    return instance({
        method: method,
        url: url,
        // 攜帶token,或者使用上面的方法,設置ajax請求前的配置
        // headers: {'Authorization': 'Bearer ' + localStorage.token},
        data: data,
        headers: {
            'Content-Type': 'application/json'
        },
    });

}

export default request

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM