Vuejs Promise（6）

Promise

1. Promise 的基本使用

• 什么情况会使用 Promise

  一般情况下是有异步操作时，使用 Promise 对这个异步操作进行封装

• { resolve, reject } => then/catch
• 三种状态： pending(等待状态)、fulfill(满足状态[一般处于该状态下])、reject(拒绝状态)

主要针对回调函数(链式编程)

1. 链式情况(极端情况) <= 回调函数中回调函数情况

new Promise((resolve, reject) => {
    // 第一次网络请求
    setTimeout(() => {
        // 成功的时候调用resolve
        resolve()
        // 失败的时候调用reject
        reject("error message")
    }, 1000)
})
    .then(() => {
        // 第一次处理的代码
        console.log("Hello World")

        return new Promise((resolve, reject) => {
            // 第二次网络请求
            setTimeout(() => {
                resolve()
            }, 2000)
        })
    })
    .then(() => {
        // 第二次处理的代码
        console.log("Hello Vue")

        return new Promise((resolve, reject) => {
            // 第三次网络请求
            setTimeout(() => {
                resolve()
            }, 3000)
        })
    })
    .then(() => {
        // 第三次处理的代码
        console.log("Hello CLI")
    })

2. 非链式情况(正常情况)

new Promise((resolve, reject) => {
    setTimeout(() => {
        // 成功的时候调用resolve
        resolve("this is a promise function")
        // 失败的时候调用reject
        reject("error message")
    }, 1000)
})
    .then(data => {
        // 成功的时候进入then
        console.log(data)
    })
    .catch(err => {
        // 失败的时候进入catch
        console.log(err)
    })

2. Promise 的链式调用

小案例
依次在后面加入 111，,222

/* 省略Promise.resolve */
new Promise(resolve => {
    setTimeout(() => {
        resolve("aaa")
    }, 1000)
})
    .then(res => {
        console.log(res, "第一层处理代码")
        return res + "111"
    })
    .then(res => {
        console.log(res, "第二层处理代码")
        return res + "222"
    })
    .then(res => {
        console.log(res, "第三层处理代码")
        // throw 等同于 Promise.reject <== 拒绝的情况
        throw "error message"
    })
    .catch(err => {
        // 终止代码 不再执行下去
        console.log(err)
    })

3. Promise 的 all 方法

• Promise.all() 方法将结果输出为一个数组

Promise.all([
    // 请求1
    new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve({ name: "Tom", age: 18 })
        }, 1000)
    }),
    // 请求2
    new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve({ name: "Bob", age: 19 })
        }, 1000)
    }),
]).then(results => {
    console.log(results)
})