待两个接口都返回再操作的情况，怎么处理，有哪些解决方法

Question

fetch('http://10.3.134.173/jsonp-test/data/dish_getbypage.php?start=1',
    ).then((response)=>
        response.json()
    ).then((res)=>{
        console.log(res[0].name);
    });
fetch('http://10.3.134.173/jsonp-test/data/dish_getbypage.php?start=2',
    ).then((response)=>
        response.json()
    ).then((res)=>{
        console.log(res[0].name);
    })

同时发起请求，比如一个等待一秒，一个等待两秒返回，然后待都返回结果然后执行后续操作，具体该怎么操作，用promise.all怎么写

Answer 1

提问前，代码请勿使用图片

假设你的两个promise分别是 Func1() 和 Func2()

let pr_task = [Func1,Func2];
Promise.all(pr_task).then(function(){
    //Here,code  After All Promise
})

---

根据问题的补充

fetch('http://10.3.134.173/jsonp-test/data/dish_getbypage.php?start=1',
    ).then((response)=>
        response.json()
    ).then((res)=>{
        console.log(res[0].name);
    });
fetch('http://10.3.134.173/jsonp-test/data/dish_getbypage.php?start=2',
    ).then((response)=>
        response.json()
    ).then((res)=>{
        console.log(res[0].name);
    })

如果你是想等 fetch('http://10.3.134.173/jsonp-test/data/dish_getbypage.php?start=1'),那么直接

let pr_task = [];
pr_task.push(fetch('http://10.3.134.173/jsonp-test/data/dish_getbypage.php?start=1'))
pr_task.push(fetch('http://10.3.134.173/jsonp-test/data/dish_getbypage.php?start=2'))

Promise.all(pr_task).then(function(){
    //Here,code  After All Promise
})

只要保证pr_task这个数组的值都是一个promise，那么Promise.all()就会等待所有的数据，并且按照原数组的顺序给出resolve的结果组成的一个数组

Answer 2

let p1 = new Promise((resolve, reject) => {
    // 第一个接口请求
    fetch('....').then((res) => {
        resolve(res);
    })
})

let p2 = new Promise((resolve, reject) => {
    // 第二个接口请求
    fetch('....').then((res) => {
        resolve(res);
    })
})

Promise.all([p1,p2]).then(data => {
    console.log(data);
})

Answer 3

首先我的是基于axios的 也就是封装的promise

        getUser () { 
            return this.$http.get('/api/v1/account/login_user')
        },
        getUserFeedback () {
            return this.$http.get('/api/v1/user_feedbacks')
        }
        接下来就是等待回调
        this.$http.all([this.getUser(),this.getUserFeedback()])
            .then(this.$http.spread(function(acct,perms){
                acct和perms也就是你两个后端接口返回的data，也就你可以操作数据
        }))
        希望帮到你

Answer 4

你的需求应该是 第一个接口数据拿到之后 再拿第二个接口的数据?

Answer 5

Promise.all