美文网首页Vue
axios利用promise.all一次发送多个请求方法封装

axios利用promise.all一次发送多个请求方法封装

作者: 糖小羊儿 | 来源:发表于2021-01-26 20:40 被阅读0次

    我们在做项目的时候,经常遇到在页面加载完毕之后,需要立马发起多次请求,按往常写法,我们会写很多http请求,这样不便于后期维护

    所以我们利用promise.all来实现一次发送多个请求方法

    封装方法:
    methods:{
        moreHttp(option) {
            let arr = [],
            keys = [];
            for (let key in option) {
            keys.push(key);
            arr.push(option[key]);
            }
            return Axios.all(arr).then(
            Axios.spread(function () {
                let result = {};
                for (let i = 0; i < arguments.length; i++) {
                let item = arguments[i];
                if (item) {
                    if (item.data && item.data.data) {
                    result[keys[i]] = item.data.data;
                    } else {
                    result[keys[i]] = item;
                    }
                }
                }
                return result;
            })
            );
        },
    }
    
    使用例子:
    
    this.http.moreHttp({
        navList:this.http.post('/getNav/list'),
        adressList:this.http.post('/getAdress/index'),
        newsList:this.http.post('/getNews/about'),
    }).then(res=>{
        if(res){
            let navList = res.navList;
            let adressList = res.adressList;
            let newsList = res.newsList;
            console.log(navList)
            console.log(adressList)
            console.log(newsList)
        }
        
    });
    

    相关文章

      网友评论

        本文标题:axios利用promise.all一次发送多个请求方法封装

        本文链接:https://www.haomeiwen.com/subject/ttsnzktx.html