怎么理解new Promise(function (resolve, reject){}）中函数的参数resolve和reject

先总结：参数resolve和reject的作用是将Promise中函数要传递的值，作为参数传给后面的then和catch中函数。

resolve（值1）把值1传给promise，然后再由promise把值1传给then（function（值1））；reject（值2）把值2给promise，然后再由promise把值2传给catch（function（值2））。

理解的过程：

开始学习廖雪峰的Promise文章时，看到：

function test(resolve, reject) {
    var timeOut = Math.random() * 2;
    log('set timeout to: ' + timeOut + ' seconds.');
    setTimeout(function () {
        if (timeOut < 1) {
            log('call resolve()...');
            resolve('200 OK');
        }
        else {
            log('call reject()...');
            reject('timeout in ' + timeOut + ' seconds.');
        }
    }, timeOut * 1000);
}

以为参数resolve, reject是用户设的俩函数，执行结果与Promise异步过程无关。

但看到后面：

// 0.5秒后返回input*input的计算结果:
function multiply(input) {
    return new Promise(function (resolve, reject) {
        log('calculating ' + input + ' x ' + input + '...');
        setTimeout(resolve, 500, input * input);
    });
}

// 0.5秒后返回input+input的计算结果:
function add(input) {
    return new Promise(function (resolve, reject) {
        log('calculating ' + input + ' + ' + input + '...');
        setTimeout(resolve, 500, input + input);
    });
}

var p = new Promise(function (resolve, reject) {
    log('start new Promise...');
    resolve(123);
});

p.then(multiply)
 .then(add)
 .then(multiply)
 .then(add)
 .then(function (result) {
    log('Got value: ' + result);
});

就发现不对，因为打印的123*123不是 multiply函数内的，只能来自函数唯一的参数，谁输入了这个参数呢，只能是promise。

 

回头仔细研究发现，resolve和reject可以改名，但需要保证名称一致，如将resolve都改为s：

var p1 = new Promise(function (s, reject) {

            s('200 OK');

            reject('timeout in ' + timeOut + ' seconds.');

})
log('p1 over: ');
var p2 = p1.then(function (r) {
    log('Done: ' + r);
},function (r) {
    log('Done: ' + r);
});
log('p2 over: ');

Log:

p1 over:

p2 over:

Done: 200 OK

而且先执行了resolve，then就生效，后执行的reject好像就没有效果了。

如果先执行reject后执行resolve，那么then不会生效。

var p1 = new Promise(function (s, reject) {
  reject('timeout in ' + 2+ ' seconds.');
  s('200 OK');

})
log('p1 over: ');
var p2 = p1.then(function (r) {
    log('Done: ' + r);
},function (r) {
    log('Done: ' + r);
});
log('p2 over: ');

Log:

p1 over:

p2 over:

Done: timeout in 2 seconds.

 

 

 

 

特别注意，如果函数内部没有执行resolve和reject，那么这个promise分支就不会继续执行。

 

var p1 = new Promise(function (s, reject) {
  log('timeout in ' + 2+ ' seconds.');
  log('200 OK');

})
log('p1 over: ');
var p2 = p1.then(function (r) {
    log('Done: ' + r);
},function (r) {
    log('Done: ' + r);
});
log('p2 over: ');

结果：

Log:

timeout in 2 seconds.

200 OK

p1 over:

p2 over:

 

 

 

注：本文使用第二种风格的catch：

 

1、第一种错误处理

    new Promise((resolve) => {
        setTimeout(() => {
            throw new Error('bye');
        }, 2000)
    }).then((value) => {
        console.log(value);
    }).catch(error => {
        console.log('Error', error);
    })

2、第二种错误处理

    // 第二种错误处理
    new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('bye');
        }, 2000)
    })
        .then((val) => {
            console.log(val)
        }, (err) => {
            console.log('Error:' + err);
        })

廖雪峰：
https://www.liaoxuefeng.com/wiki/1022910821149312/1023024413276544

简书：

https://www.jianshu.com/p/3190ad5965d7