promise基础

Posted 2020-09-30 lmh2072005

Promise 是异步编程的一种解决方案，主要解决了异步回调嵌套写法的问题，还提供了统一的接口，使得控制异步操作更加容易。

function asyncFn(){
    return new Promise(function(resove, reject){
        /*setTimeout(function(){
            resove(‘async function‘);
        },100);*/
        reject(new Error(‘error test‘)) //同一时间promise状态是单一的，要么是reject,要么是resove
        resove(‘async function‘); //不会执行

    });
}

//Promise 新建后就会立即执行。
var promise = new Promise(function(resolve, reject) {
    console.log(‘Promise‘);  //立即执行
    resolve();
});

promise.then(function() {
    console.log(‘Resolved.‘);
});

console.log(‘Hi!‘);

// Promise
// Hi!
// Resolved

//异步加载图片的例子。
function loadImageAsync(url) {
    return new Promise(function(resolve, reject) {
        var image = new Image();

        image.onload = function() {
            resolve(image);
        };

        image.onerror = function() {
            reject(new Error(‘Could not load image at ‘ + url));
        };

        image.src = url;
    });
}


//resolve函数的参数除了正常的值以外，还可能是另一个 Promise 实例，比如像下面这样
var p1 = new Promise(function (resolve, reject) {
    // ...
});

var p2 = new Promise(function (resolve, reject) {
    // ...
    resolve(p1);
})
//这时p1的状态就会传递给p2，也就是说，p1的状态决定了p2的状态。如果p1的状态是Pending，那么p2的回调函数就会等待p1的状态改变；如果p1的状态已经是Resolved或者Rejected，那么p2的回调函数将会立刻执行。

//一般来说，调用resolve或reject以后，Promise 的使命就完成了，后继操作应该放到then方法里面，而不应该直接写在resolve或reject的后面。所以，最好在它们前面加上return语句
new Promise((resolve, reject) => {
    return resolve(1);
// 后面的语句不会执行
console.log(2);
})

//Promise 实例具有then方法,它的作用是为 Promise 实例添加状态改变时的回调函数,then方法返回的是一个新的Promise实例
getJSON("/posts.json").then(function(json) {
    return json.post;
}).then(function(post) {
        // ...
});
//上面的代码使用then方法，依次指定了两个回调函数。第一个回调函数完成以后，会将返回结果作为参数，传入第二个回调函数。第二个回调函数会等待第一个回调函数执行完根据返回新的promise对象状态执行相应的步骤

asyncFn().then(function(value){
    console.log(value);
}).catch(function(error){ //一般说来，使用.catch来将resolve和reject处理分开来写是比较推荐的做法
    console.log(error)
})
//.catch 等价 promise.then(undefined, onRejected)
/*
asyncFn().then(function(value){
    console.log(value);
}, function(error){
    console.log(error)
})*/

/*new Promise(function(resove, reject){
    resove(123);
})*/

Promise.resolve(132).then(function(value){
    console.log(value) //即使在调用 promise.then 注册回调函数的时候promise对象已经是确定的状态，Promise也会以异步的方式调用该回调函数
})

//Promise.resolve静态方法除了是快捷方式外，还可以把thenable对象转换为promise对象

Promise.reject(new Error(‘error test2‘)).catch(function(error){
    console.log(error);
})

//Promise.reject()方法的参数，会原封不动地作为reject的理由，变成后续方法的参数。这一点与Promise.resolve方法不一致。

//Promise保证了每次调用都是以异步方式进行的

//Promise#then 不仅仅是注册一个回调函数那么简单，它还会将回调函数的返回值进行变换，创建并返回一个promise对象。
//实际上 Promise#catch 只是 promise.then(undefined, onRejected); 方法的一个别名而已

//在IE8及以下版本基于ECMAScript 3实现的,在ECMAScript 3中保留字是不能作为对象的属性名使用的(点标记法（dot notation） 要求对象的属性必须是有效的标识符)，因此不能将 catch 作为属性来使用，也就不能编写类似 promise.catch() 的代码，因此就出现了 identifier not found 这种语法错误了
//而现在的浏览器都是基于ECMAScript 5的，而在ECMAScript 5中保留字都属于 IdentifierName ，也可以作为属性名使用了
//但是使用 中括号标记法（bracket notation）的话，则可以将非合法标识符作为对象的属性名使用
var promise = Promise.reject(new Error("message")); //reject方法的作用，等同于抛出错误
promise["catch"](function (error) {
    console.error(error);
});  //或者我们不单纯的使用 catch ，而是使用 then 也是可以避免这个问题的


//次调用then都会返回一个新创建的promise对象

//Promise.all 接收一个 promise对象的数组作为参数，当这个数组里的所有promise对象全部变为resolve或reject状态的时候，它才会去调用 .then 方法, 调用then方法values状态值也是一个数组
//传递给 Promise.all 的promise并不是一个个的顺序执行的，而是同时开始、并行执行的。
// `delay`毫秒后执行resolve
function timerPromisefy(delay) {
    return new Promise(function (resolve) {
        setTimeout(function () {
            resolve(delay);
        }, delay);
    });
}
var startDate = Date.now();
// 所有promise变为resolve后程序退出
Promise.all([
        timerPromisefy(1),
        timerPromisefy(32),
        timerPromisefy(64),
        timerPromisefy(128)
    ]).then(function (values) {
        console.log(Date.now() - startDate + ‘ms‘);
        // 約128ms
        console.log(values);    // [1,32,64,128]  状态值
    });
var p = Promise.all([p1, p2, p3]);
//只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。
//只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。

//如果作为参数的 Promise 实例，自己定义了catch方法，那么它一旦被rejected，并不会触发Promise.all()的catch方法。,因为自己定义了catch方法会返回新的promise对象，也会变成resolved

//Promise.race 只要有一个promise对象进入 FulFilled 或者 Rejected 状态的话，就会继续进行后面的then或catch处理。

var p = Promise.race([p1, p2, p3]);
//只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给p的回调函数
//Promise.race方法的参数与Promise.all方法一样，如果不是 Promise 实例，就会先调用Promise.resolve方法，将参数转为 Promise 实例，再进一步处理。
const p = Promise.race([
    fetch(‘/resource-that-may-take-a-while‘),
    new Promise(function (resolve, reject) {
        setTimeout(() => reject(new Error(‘request timeout‘)), 5000)
    })
]);
p.then(response => console.log(response));
p.catch(error => console.log(error));
//上面代码中，如果5秒之内fetch方法无法返回结果，变量p的状态就会变为rejected，从而触发catch方法指定的回调函数。
//需要注意的是，立即resolve的Promise对象，是在本轮“事件循环”（event loop）的结束时，而不是在下一轮“事件循环”的开始时。

var winnerPromise = new Promise(function (resolve, reject) {
    setTimeout(function () {
        console.log(‘this is winner log‘);
        //reject(new Error(‘this is winner error‘));
        resolve(‘this is winner‘);
    }, 4);
});
var loserPromise = new Promise(function (resolve, reject) {
    setTimeout(function () {
        console.log(‘this is loser log‘);
        reject(new Error(‘this is loser error‘));
       // resolve(‘this is loser‘);
    }, 1000);
});
// 第一个promise变为resolve后程序停止
Promise.race([winnerPromise, loserPromise]).then(function (value) {
    console.log(value);    // => ‘this is winner‘
}).catch(function(error){
        console.log(‘error:‘+error)
    });
// Promise.race 在第一个promise对象变为Fulfilled或Rejected之后，并不会取消其他promise对象的执行,但是其他promise对象执行后不会触发then或catch。


// then or catch?
// .catch 也可以理解为 promise.then(undefined, onRejected)
//Promise.resolve(42).then(throwError, onRejected);  有异常发生onRejected不会被调用
//Promise.resolve(42).then(throwError).catch(onRejected); 有异常发生时onRejected会被调用

//.then 方法中的onRejected参数所指定的回调函数，实际上针对的是其promise对象或者之前的promise对象，而不是针对 .then 方法里面指定的第一个参数，即onFulfilled所指向的对象，这也是 then 和 catch 表现不同的原因。


//Deferred 拥有 Promise
//Deferred 具备对 Promise的状态进行操作的特权方法
function Deferred() {
    this.promise = new Promise(function (resolve, reject) {
        this._resolve = resolve;
        this._reject = reject;
    }.bind(this));
}
Deferred.prototype.resolve = function (value) {
    this._resolve.call(this.promise, value);
};
Deferred.prototype.reject = function (reason) {
    this._reject.call(this.promise, reason);
};

//Promise一般都会在构造函数中编写主要处理逻辑，对 resolve、reject 方法的调用时机也基本是很确定的。
new Promise(function (resolve, reject){
    // 在这里进行promise对象的状态确定
});

//Deferred的话，并不需要将处理逻辑写成一大块代码，只需要先创建deferred对象，可以在任何时机对 resolve、reject 方法进行调用。

var deferred = new Deferred();

// 可以在随意的时机对 `resolve`、`reject` 方法进行调用

//Promise对象的回调链，不管以then方法或catch方法结尾，要是最后一个方法抛出错误，都有可能无法捕捉到（因为Promise内部的错误不会冒泡到全局）。因此，我们可以提供一个done方法，总是处于回调链的尾端，保证抛出任何可能出现的错误。
Promise.prototype.done = function (onFulfilled, onRejected) {
    this.then(onFulfilled, onRejected)
        .catch(function (reason) {
            // 抛出一个全局错误
            setTimeout(() => { throw reason }, 0);
        });
};
//不管怎样，done都会捕捉到任何可能出现的错误，并向全局抛出。

//finally方法用于指定不管Promise对象最后状态如何，都会执行的操作。它与done方法的最大区别，它接受一个普通的回调函数作为参数，该函数不管怎样都必须执行。
Promise.prototype.finally = function (callback) {
    let P = this.constructor;
    return this.then(
        value  => P.resolve(callback()).then(() => value),
    reason => P.resolve(callback()).then(() => { throw reason })
    );
};
//不管前面的Promise是fulfilled还是rejected，都会执行回调函数callback

//经常遇到一种情况：不知道或者不想区分，函数f是同步函数还是异步操作，但是想用 Promise 来处理它。因为这样就可以不管f是否包含异步操作，都用then方法指定下一步流程，用catch方法处理f抛出的错误
Promise.try(database.users.get({id: userId})) 
    .then(...)
.catch(...)

//目前只是提案

参考文档：

http://liubin.org/promises-book/

https://github.com/ruanyf/es6tutorial/blob/gh-pages/docs/promise.md