Promise和Promise的方法

（Promise和Promise的方法）

Promise是ES6一个伟大的发明，他使我们从回调地狱中能够走出来。

什么是Promise

从字面上来看，Promise就是一个承诺。那么，在ES6当中，Promise通常用来控制异步操作。当一个异步操作成功的时候，触发.then的操作。当一个异步操作不成功的时候，触发.catch操作。那么，我们来写下一个Promise的操作吧。

const loadData = new Promise((resolve, reject) => {
setTimeout(() => {
    rseolve({data: "loding Done!"})
}, 2000)
})
loadData.then(data => {
console.log(data.data);
})
复制代码

上例就是一个典型的Promise例子。 当我们去执行一个数据库的读取操作的时候，我们通常都是耗费时间的。是一个异步操作。那么，我们用setTimout去模拟读取数据的时间。当这个数据读取完成之后，再去通知下面的代码对应去执行相应的动作。这里，我们利用resolve发出一个完成的信号。下面的代码利用一个.then去接收到这个完成的信号同时执行相应的完成操作。

当然，如果异步操作失败了，我们可以通过reject去发出一个操作失败的信号，在.catch当中去捕捉并处理这个信号。

const loadData = new Promise((resolve, reject) => {
    setTimeout(() => {
        reject("Timeout!")
    }, 3000)
})
复制代码

loadData.catch(err => { console.log(err) }) 处理多个Promise 在ES6当中，共有两种处理多个Promise的方法。

Promise.all(); Promise.race(); Promise.all 例如，当我们去读取页面的主体内容和页面的标题内容時，两个异步请求互不相关。那么，我们就可以同时去发起ajax请求。

const loadMain = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve({
            data: {
                title: "主体标题"，
                desc: "主体内容"
            }
        })
    }, 2000)
    })

const loadSide = new Promise((resolve, reject) => {
setTimeout(() => {
    resolve({
        data: {
            list: ["主页","新闻列表","关于"]
        }
    })
}, 500)
})

Promise.all([loadMain, loadSide]).then(res => {
    console.log(res)
    }).catch(err => {
        console.log(err)
    })
复制代码

注意点:

当我们使用all方法发起请求的时候，只有所有的Promise成功后，才会执行.then方法。 任何一个错误，都会导致执行.catch方法。 Promise.race() race方法也是用于处理多个Promise请求的，不同于all方法的是，race方法接收最快收到的Promise请求，无论是成功还是失败，都以最快的为准。

转载于:https://juejin.im/post/5c6ea07f51882562ee645eca