axios+Promise封装request请求

1.axios全局配置

axios.defaults.baseURL = 'http://127.0.0.1:8888';
axios.defaults.timeout = 5000; //超时时间
axios.defaults.headers.post['Content - Type'] = 'application/json;charset=UTF-8';

2.axios请求拦截

axios.interceptors.request.use((config) => {
    // 拦截成功onFulfilled
    // (里面有发送请求的所有信息, 增加token, 数据, 过渡动画等)
    console.log(config);
    config.abc = "hello,World";
    // 一定要返回congfig
    return config;

}, (error) => {
    // 拦截失败onRejected
    return Promise.error(error);
})

3.axios响应拦截(不返回页面拿不到数据)

axios.interceptors.response.use((res) => {
    console.log(res.data);
    return res.data;
}, (error) => {
    return Promise.error(error);
})

4.request请求

export default function request(url = '', parmas = {}, type = 'GET') {
    // 返回的也是一个promise
    return new Promise((resolve, reject) => {
        let promise = null;
        // 1.判断请求的类型
        if (type.toUpperCase() === 'GET') { //get请求
            promise = axios({
                url,
                params: parmas
            })
        } else if (type.toUpperCase() === 'POST') {
            promise = axios({
                method: 'POST',
                url,
                data: parmas
            })
        }
        // 2.处理返回值
        promise.then((res) => {
            // 通过resolve()把res返回给外部
            resolve(res);
        }).catch((err) => {
            // 通过reject()把失败结果返回给外部
            reject(err);
        })
    })
}
上一篇:VUE学习笔记:27.脚手架vue-cli之promise


下一篇:如何实现一个简单的并发控制?