徐向博 / Imin.

ES6 Promise 对象
作者:Imin 时间:2019-06-17 分类: 前端

之前在作ES6笔记的时候,提到过promise对象,由于时间和promise的重要性等原因,当时没有做过多的叙述,这篇文章把它单独拎出来做笔记,可见这玩意还是挺重要的(其实是脑子笨,当时没研究懂,当然现在也不敢说研究懂了,只是把自己的理解写出来,方便以后查阅)。

首先了解一下什么是promise。

从字面意思浅显的来看,promise = 承诺。我的理解是:给程序一个承诺(new promise),在需要的时候去兑现(then),如果无法兑现就给出原因(error)。例如axios处理请求结果所使用的.then() 。promise长这个样子:

const im = new Promise((resolve, reject) => {
    // promise内部执行的动作
    let a = 1, b = 2;
    c = a + b;
    if(c == 3){
        resolve(c);
    }else{
        let error = '哈哈哈,报错了!';
        reject(error);
    }
})

从上面的代码看,promise接收一个函数作为参数,该函数接收两个状态,resolve和reject,用来代表执行结果的两种状态。所以在获取执行结果的时候,是这样的:

im.then((data) => {
    // 哦吼,执行成功了!
    console.log(data) // 3
}, (data) => {
    // 哦吼,失败了
    console.log(data) // '哈哈哈,报错了!'
})

下班了,再见,下次再写!

-----------------------

我又回来了,继续。

说一个之前遇到过的一个关于promise的面试题:

console.log(0)
const im = new Promise((resolve, reject) => {
    console.log(1)
    if(true){
        resolve(2)
    }else{
        reject(3);
    }
})
im.then((v) => {
    console.log(v)
}, (v) => {
    console.log(v)
})
// 问控制台输出顺序,以及为什么?

上面的结果是 0 1 2。因为:JS是顺序执行的,promise对象在创建之后,会立即执行,但是他的回调函数是异步执行的。

------------------另外一个话题-----------------

有时候会在别人的代码中看到类似: then().then()这种写法,自己曾经挖过坑,记录一下。

console.log(0)
const im = new Promise((resolve, reject) => {
    console.log(1)
    if(true){
        resolve(2)
    }else{
        reject(3);
    }
})
im.then((v) => {
    console.log(v)
    return v++
}).then((v) => {
    console.log(v)
})

现在的输出是:0 1 2 3,注意:3 并不是reject回调输出的。如果在前一个then里return this,会返回当前的promise对象。

有错误以后再改。

本文标签: promise对象