axios封装使用

1、安装

npm install axios 

2、封装
request.js

import axios from 'axios'

/**
 * 最好的封装方式  Promise
 * @param config
 * @returns {Promise<unknown>}
 */
export function request(config) {
    return new Promise((resolve, reject) => {

        const instance = axios.create({
            baseUrl: config.baseUrl,
            timeout: 5000
        });

        instance(config)
            .then(res => {
                resolve(res)
            })
            .catch(err => {
                reject(err)
            });
    });
}

/**
 * 最后优化后的方案
 * @param config
 * @returns {Promise<unknown>}
 */
export function request1(config) {

    const instance = axios.create({
        baseUrl: config.baseUrl,
        timeout: 5000
    });

    return instance(config);
}

/**
 * 调用写法
 */
/*
request({
    baseUrl: '',
    url: '',
}).then(res => {
    console.log(res);
}).catch(err => {
    console.log(err);
})*/


// 拦截器的使用
export function request2(config) {

    const instance = axios.create({
        baseUrl: config.baseUrl,
        timeout: 5000
    });


    //设置拦截器
    //请求拦截处理
    instance.interceptors.request.use(config => {
        //为什么要用拦截器：
        //1、比如config中的一些信息不符合服务器的要求，增加header等等
        //2、每次网络请求比较慢， 希望在界面上加个正在进入的图标
        //3、某些URL请求，必须带上验证参数（比如登录后必须带TOKEN）等等特殊的信息


        //最后必须返回，放行请求流程
        return config;
    }, err => {
        //错误消息
        console.log(err);
    });


    //响应拦截处理
    instance.interceptors.response.use(res => {
        console.log(res);


        //最后必须返回成功的data
        return res.data;
    }, err => {
        console.log(err);
    });


    return instance(config);
}