項目中axios工具類封裝以及使用--下次可直接使用

// 引入axios
import axios from 'axios';

// 創建axios實例
const httpService = axios.create({
    // url前綴-'http:xxx.xxx'
    baseURL: process.env.BASE_API, // 需自定義
    // 請求超時時間
    timeout: 3000 // 需自定義
});

// request攔截器
httpService.interceptors.request.use(
    config => {
        // 根據條件加入token-安全攜帶
        if (true) { // 需自定義
            // 讓每個請求攜帶token
            config.headers['User-Token'] = '';
        }
        return config;
    }, 
    error => {
        // 請求錯誤處理
        Promise.reject(error);
    }
)

// respone攔截器
httpService.interceptors.response.use(
    response => {
        // 統一處理狀態
        const res = response.data;
        if (res.statuscode != 1) { // 需自定義
            // 返回異常
            return Promise.reject({
                status: res.statuscode,
                message: res.message
            });
        } else {
            return response.data;
        }
    },
    // 處理處理
    error => {
         if (error && error.response) {
            switch (error.response.status) {
                case 400:
                    error.message = '錯誤請求';
                    break;
                case 401:
                    error.message = '未授權，請重新登錄';
                    break;
                case 403:
                    error.message = '拒絕訪問';
                    break;
                case 404:
                    error.message = '請求錯誤,未找到該資源';
                    break;
                case 405:
                    error.message = '請求方法未允許';
                    break;
                case 408:
                    error.message = '請求超時';
                    break;
                case 500:
                    error.message = '服務器端出錯';
                    break;
                case 501:
                    error.message = '網絡未實現';
                    break;
                case 502:
                    error.message = '網絡錯誤';
                    break;
                case 503:
                    error.message = '服務不可用';
                    break;
                case 504:
                    error.message = '網絡超時';
                    break;
                case 505:
                    error.message = 'http版本不支持該請求';
                    break;
                default:
                    error.message = `未知錯誤${error.response.status}`;
            }
        } else {
            error.message = "連接到服務器失敗";
        }
        return Promise.reject(error);
    }
)

/*網絡請求部分*/

/*
 *  get請求
 *  url:請求地址
 *  params:參數
 * */
export function get(url, params = {}) {
    return new Promise((resolve, reject) => {
        httpService({
            url: url,
            method: 'get',
            params: params
        }).then(response => {
            resolve(response);
        }).catch(error => {
            reject(error);
        });
    });
}

/*
 *  post請求
 *  url:請求地址
 *  params:參數
 * */
export function post(url, params = {}) {
    return new Promise((resolve, reject) => {
        httpService({
            url: url,
            method: 'post',
            data: params
        }).then(response => {
            resolve(response);
        }).catch(error => {
            reject(error);
        });
    });
}

/*
 *  文件上傳
 *  url:請求地址
 *  params:參數
 * */
export function fileUpload(url, params = {}) {
    return new Promise((resolve, reject) => {
        httpService({
            url: url,
            method: 'post',
            data: params,
            headers: { 'Content-Type': 'multipart/form-data' }
        }).then(response => {
            resolve(response);
        }).catch(error => {
            reject(error);
        });
    });
}

export default {
    get,
    post,
    fileUpload
}

使用

// 引入工具類
import axios from '@/util/axios'

// 使用
const URL = ''; // url地址
const params = {}; // 參數
axios.post(URL + '/login/login', params);

 axios文檔: https://github.com/axios/axios