这是我参与「第四届青训营」笔记创作活动的第29天

Promise是什么?

从语法上来说: Promise 是一个构造函数
从功能上来说: promise 对象用来封装一个异步操作并可以获取其成功/ 失败的结果值

Promise基本使用

const p = new Promise((resolve, reject) => {
    setTimeout(() => {
        const num = Math.Random() * 10
        if (num > 5) resolve(num) // 返回一个成功结果
        reject(num) // 返回一个失败的结果
    }, 1000)
})

// .then能拿到promise指定成功或失败的回调函数来获取成功的 vlaue 或失败的 reason
p.then((value) => { // 获取成功的函数
    console.log('你获得一个成功的数字为' + value)
}, (season) => { // 获取失败的函数
    console.log('你获得一个失败的数字为' + value)
})

也可以用Promise原型上的catch方法获取失败的函数

p.catch((season) => {
    console.log('你获得一个失败的数字为' + value)
})

使用 promise 封装 ajax 异步请求

    function getPromiseAjax (url) {
        return new Promise((resolve, reject) => {
            const xhr = new XMLHttpRequest()
            xhr.open('GET', url)
            xhr.send()
            xhr.onreadystatechange = () => {
                if (xhr.readyState !== 4) return 
                if (xhr.status > 200 && xhr.status < 300) {
                    resolve(xhr.response) // 成功
                } else {
                    reject(xhr.status) // 失败
                }
            }
        })
    }

getPromiseAjax(url).then能拿到promise指定成功或失败的回调函数来获取成功的 vlaue 或失败的 reason

使用Promise的好处

支持链式调用, 可以解决回调地狱问题
可以在异步任务结束后指定/多个

Promise.resolve 方法: (value) => {}

value: 成功的数据或 promise 对象

    const p = Promise.resolve('123') // 传入的参数不是Promise对象, 则都是成功的结果
    const p = Promise.resolve(new Promise((resolve, reject) => {}))
    // 当传入的参数是Promise对象， 则参数的结果决定了是成功还是失败

Promise.reject 方法: (reason) => {}

reason: 失败的原因

    const p = Promise.reject('123')
    const p = Promise.reject(new Promise((resolve, reject) => {}))
    // 不论传入的参数是什么类型， 返回结果都是失败

Promise.all 方法: (promises) => {}

promises: 包含 n 个 promise 的数组

    const p = Promise.resolve(new Promise((resolve, reject) => {
                resolve('成功')
            }))
    const p1 = Promise.resolve('完美')
    const p2 = Promise.resolve(666)
    const result = Promise.all([p, p1, p1])
    console.log(result) //  ["成功", '完美', 666]

只有promises数组都是返回成功的结果，result才是成功
要是有一个是失败， result返回的就是失败的Promise结果(数组中第一个失败)

Promise.race 方法: (promises) => {}

返回一个新的 promise, 第一个完成的 promise 的结果状态就是最终的结果状态

ES6中的Promise | 青训营笔记