前端面试之---Promise实现多个请求并成功拿到数据后再执行其他异步请求---ES6中的Promise

面试题content？

最近前端面试真的感觉像在取经一样，不发牢骚了，且谈这几天脑海里有着深刻印象的面试题：

通过ES6的Promise去实现一个请求A和一个请求B，需要判断成功获取数据后才能继续去请求C或者一系列的请求。

此处我说的是请求A和请求B之间异步执行，那么如果请求A和请求B之间是同步执行的关系，可以使用async、await或者Promise.all()和await   ---   后面再去了解一下？

Promise什么东西？

它可以去实现一个异步操作，最常见的应该就是去封装成异步请求了。

Promise对象是一个构造函数，有三种状态表示：

• pending：初始状态，正在进行时(ing...)
• resolved(fullfilled)：请求成功
• rejected：请求失败

来一份简单的代码？

// 创建一个req函数，并返回Promise实例对象
let req = function(...) {   // 封装请求可以携带的参数，例如url啥啥的，最好是以对象的形式
    // ...代码

    return new Promise((resolve, reject) => {
        // ...代码，例如你发送请求了
        if(success){   // 请求成功
            resolve(res)
        } else {
            reject(err)
        }
    })
}

// 发送请求
req().then(res => {
    // ...代码   对成功后的数据做相应处理
}).catch(err => {
    // 可以直接打印错误日志或者提示请求失败！
    console.log(err)
})

then方法其实是有两个参数，第一个参数是resolved（请求成功）状态的回调函数，另一个就是rejected（请求失败）状态的回调函数（可选），也就是可以去执行catch回调函数来表示rejected状态。一般来说，我们只需要用catch去写失败的回调函数，或者不写catch都可以

正题来啦！

那么如何实现多个异步请求中又带有同步？

// 来两个promise实例
const pro1 = new Promise((resolve, reject) => {
    // ...代码
})
const pro2 = new Promise((resolve, reject) => {
    // ...代码
})

// 两个pro的状态都为resolved的时候才能执行后面的请求
Promise.all([pro1, pro2]).then((res) => {
    // ...code   执行后面的请求
    console.log(res)
})

Promise.all()

第一个参数是一个可迭代对象，如Array或String，只能当前面所有的对象执行成功后，才能执行成功的回调函数，否则执行失败的回调函数，失败的原因是第一个失败Promise的结果，不会管其他Promise是否完成。

本文地址：https://blog.csdn.net/qq_42001842/article/details/107502361