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")
    })
  1. 非链式情况(正常情况)
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)
})
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值