為什么選擇axios岸梨？

1.使用axios可以統(tǒng)一做請求-響應(yīng)攔截喜颁，例如響應(yīng)時我們將響應(yīng)信息攔截起來，判斷狀態(tài)碼曹阔，從而彈出報錯信息
2.設(shè)定請求超時,例如3000ms未響應(yīng)則停止請求
3.基于promise,可以很方便地使用then或者catch來處理請求
4.自動轉(zhuǎn)換json數(shù)據(jù)
4.等等

代碼如下

import axios, { AxiosRequestConfig } from 'axios';
import qs from 'qs';
import { getToken, removeToken } from '@/utils/common';
import { Message, Loading } from 'element-ui';
import router from '@/router/index';
console.log(process.env.VUE_APP_BASE_API)
const service = axios.create({
    baseURL: process.env.VUE_APP_BASE_API, //完整的URL =   baseURL + url  
    timeout: 20000,
    withCredentials: true,
    headers: {
        'X-Requested-With': 'XMLHttpRequest',
        'Content-Type': 'application/x-www-form-urlencoded',
    }
})
let loadinginstace: any;
// 請求攔截器
service.interceptors.request.use((config: AxiosRequestConfig) => {
    const token = getToken();
    loadinginstace = Loading.service({
        fullscreen: true, lock: true,
        text: '加載中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
    })
    token && (config.headers.Authorization = token);
    return config;
}, (error: any) => {
    console.log(error)
    loadinginstace.close();

    return Promise.reject(error);
});

// 響應(yīng)攔截器
service.interceptors.response.use(
    response => {
        //console.log(response)
        loadinginstace.close();
        if (response.status === 200) {
            return Promise.resolve(response);
        } else {
            return Promise.reject(response);
        }
    }, error => {
        loadinginstace.close();
        if (error.message.includes('timeout')) {
            console.log("錯誤")
            Message.error({
                showClose: true,
                message: '請檢查網(wǎng)絡(luò)再重新連接',
            });
            return Promise.reject('請檢查網(wǎng)絡(luò)再重新連接');
        } else if (error && error.response.status) {
            switch (error.response.status) {
                case 401:
                    router.replace({
                        path: '/login',
                        query: { redirect: router.currentRoute.fullPath }
                    });
                    break;
                case 403:
                    Message.error({
                        showClose: true,
                        message: '登錄過期半开，請重新登錄',
                    });
                    removeToken()

                    setTimeout(() => {
                        router.replace({
                            path: '/login',
                            query: {
                                redirect: router.currentRoute.fullPath
                            }
                        });
                    }, 1000);
                    break;
                case 404:
                    Message.error({
                        showClose: true,
                        message: '網(wǎng)絡(luò)請求不存在',
                    });
                    setTimeout(() => {
                        router.replace({
                            path: '/404',
                            query: {
                                redirect: router.currentRoute.fullPath
                            }
                        });
                    }, 1000);
                    break;
                default:
                    Message.error({
                        showClose: true,
                        message: error.response.data.message,
                    });
                    return Promise.reject(error.response);
            }
        }



    }
)


// 請求方式的配置

export const post = (url: any, data?: any) => {  //  post
    return new Promise((resolve: any, reject: any) => {
        service({
            method: 'post',
            url,
            data: qs.stringify(data),
        }).then(
            res => {
                //console.log(res)
                return resolve(res.data);
            }
        ).catch(err => {
            reject(err.data)
        })
    })

}
export const get = (url: any, params?: any) => {  // get
    return new Promise((resolve: any, reject: any) => {
        service({
            method: 'get',
            url,
            params, // get 請求時帶的參數(shù)
        })
            .then(res => {
                resolve(res.data);
            })
            .catch(err => {
                reject(err.data)
            })
    })

}

使用如下

import { post ,get} from "@/utils/http";
const aaa:(data: Porject.AddProjectType) => Promise<any> = async (data: Porject.AddProjectType): Promise<any> => {
    return post(
        "/project/add_project",
        data
    )
}


const bbb= (uuid:number) => {
    return get("/task/sectiontask",{puuid:uuid})    
}

多多指教 bye~~~