axios 封装

最新推荐文章于 2021-05-25 15:43:07 发布

原创最新推荐文章于 2021-05-25 15:43:07 发布 · 200 阅读

1 ·

CC 4.0 BY-SA版权

这里配合拦截器和promise 再把axios 封装；过滤一遍；

可以提高效率

import axios from "axios";

import {Modal} from "antd";



const  axiosUtil = function ({...option}) {
    //在路由部分插入加载动画 移动端可以直接使用 Toast组件
    let loading =document.getElementById("loadingBox");
    axios.interceptors.request.use(function (config) {
        loading.style.display="block";
        return config
    });

//拦截响应
    axios.interceptors.response.use(function (config) {

        loading.style.display="none";
        return config
    });
    return new Promise((resolve,reject)=>{
        axios({
            url:option.url,
            method:option.method,
            baseURL:"https://www.easy-mock.com/mock/5bb61edebaa7dc5e5e8d18d0/mockapi",
            timeout:4000,
            params:option.params?option.params:""
        }).then((res)=>{

           if(res.status=="200"){
                 //直接拿结果 提高效率
                if(res.data.code=="0"){
                    resolve(res.data.result);
                }else{
                    // 直接抛出报错信息 方便调试
                    Modal.info({
                        title:`接口提示`,
                        content:`错误码： ${res.data.code}，错误信息：${res.data.msg}`
                    })
                }

           }else{
               reject(res);
           }
        })


    })


};

export default axiosUtil;