Promise用法总结

Posted 2021-01-06 mengff

1. Promise的状态

 

Promise对象有三个状态：

1. 进行中(pending)

2. 成功(resolved)

3. 失败(rejected)

 

2. 生成一个Promise对象

 

1. 构造函数

new Promise(function(resolve,reject){
 
});

resolve和reject函数是浏览器内部实现的，直接调用即可。

 

2. Promise.resolve

Promise.resolve()直接返回一个resolve状态的Promise对象

Promise.resolve可以用来生成一个then链

 

3. Promise.reject

Promise.reject()直接返回一个reject状态的Promise对象

 

3. Promise的then的用法

Promise的then永远返回一个新的Promise，Promise的catch是then(null,rejection)的语法糖，catch中也会返回一个新的Promise。

建议在Promise的then永远return或throw，不要只是执行一个函数。

例如：

var aPromise = new Promise(function (resolve) {
    resolve(100);
});
var thenPromise = aPromise.then(function (value) {
    console.log(value);
});
var catchPromise = thenPromise.catch(function (error) {
    console.error(error);
});
console.log(aPromise !== thenPromise); // => true
console.log(thenPromise !== catchPromise);// => true

=== 是严格相等比较运算符，我们可以看出这三个对象都是互不相同的，这也就证明了 then 和 catch 都返回了和调用者不同的promise对象。

1. Promise的then内部可以做三种事情：

 

(1). return 另一个promise

(2). return 一个同步值(或者undefined)

因为javascript函数无返回值时候，默认返回undefined，所以只是执行一个函数，不return，默认就是返回undefined。

返回一个同步值在Promise中会将同步代码包裹为promise，得到的还是一个promsie。返回一个同步值是有用处的，例如，

一个异步值在内存中做了缓存，可以直接从内存中拿到该值，直接返回，不必再调用异步接口。

getUserByName(‘xxx‘).then(function(user){
    if(imMemoryCache[user.id]){
        return inMemoryCache[user.id];
    }
    return getUserAccountById(user.id);
}).then(function(userAccount){

});

(3). throw 一个同步异常

 

2. Promise的一些写法

new Promise(function(resolve,reject){
    resolve(syncValue);
}).then(/*...*/)

//可以写成
Promise.resolve(syncValue).then(/*...*/)

//一个错误也可以写成
Promise.reject(new Error(‘...‘))

这样无论成功或失败都可以后面的then和catch中捕获和继续操作

 

3. Promise的then中只能传递函数，如果为其他类型，例如另一Promise，会被解释为null，此时Promsie的值传递会穿透

 

例如：

Promise.resolve(‘foo‘).then(Promise.resolve(‘bar‘)).then(function(result){
    console.log(result);
});
//会被解释为：
Promise.resolve(‘foo‘).then(null).then(function(result){
    console.log(result);
});

第一个resolve的值会穿透到then，打印出foo。

 

4. then的四种写法的区别

// 写法一
f1().then(function () {
    return f2();
});

// 写法二
f1().then(function () {
    f2();
});

// 写法三
f1().then(f2());

// 写法四
f1().then(f2);

1. 写法1和4完全等价，f1值能传递到f2,f2的返回值也能继续向后面的then传递

2. 写法2相当于默认return undefined，无法向后面的then传递值

3. 写法3能够向后面传递f2的值，没有更深刻的解释(有懂的朋友请评论告知)

4. Promise的调用方法

每个then返回一个新的promise调用，这种写法被称为composing promises。

promise1.then(function(){
    return promise2;
}).then(function(){
    return promise3;
}).then(function(){
    return promise4;
}).catch(function(err){
    console.log(err);
});

5. Promise的并行执行

由于promise一旦被创建，就会立即执行，所以拿到一个Promise数组时候，其中的promise必然全部开始执行了。

因此要让一系列promise顺序执行，只能将promise放在一个函数中，在要执行的时候才去创建他，就是一个工厂

函数，promiseFactory。promise并行执行的代码应该如下：

function executeSequentially(promiseFactories){
    var res = Promsie.resolve();
    promiseFactories.forEach(function(promiseFactory){
        res = res.then(promiseFactory);
    });
    return res;
}
//工厂函数只是简单的创建一个promise
function promiseFactory(){
    return createAPromise();
}

6. Promise捕获错误

7. 实现一个Promise版本的ajax

//原生版本
function Http(){

}

Http.prototype = {
    get:function(opts){
        return this.ajax(opts);
    },
    post:function(){
        return this.ajax(opts);
    },
    ajax:function(opts){
        return Promise(function(resolve,reject){
            var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject(‘...‘);
            var {url,method,data,async,success,fail} = options;
            var sendBody = null;
            var qs = Object.keys(data).reduce(function(cur,pre,index){
                return pre + ‘&‘ + encodeURIComponent(cur) + ‘=‘ + encodeURIComponent(data[cur]);
            },‘‘).slice(1);
            if(medthod == ‘get‘){
                url += ‘?‘ + qs;
            }
            else if(medhot == ‘post‘){
                xhr.setRequestHeader(‘Content-type‘, ‘application/x-www-form-urlencoded‘);
                sendBody = qs || null;
            }
            xhr.onreadystatechange = function(){
                if(xhr.readystate == 4){
                    if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
                        resolve(xhr,xhr.responseText);
                    }
                }
                else{
                    reject(xhr,xhr.responseText);
                }
            }
            xhr.open(method,url,async);
            xhr.send(sendBody);
        });
    }
}

//jquery版本
function Http(){

}

Http.prototype = {
    get:function(opts){
        return this.ajax(opts);
    },
    post:function(opts){
        return this.ajax(opts);
    },
    ajax:function(){
        return $.ajax(opts);
    }
}

 

 

参考：https://juejin.im/entry/596f2ab2f265da6c25190f41

　　   http://javascript.ruanyifeng.com/advanced/promise.html#toc2

　　　https://www.kancloud.cn/kancloud/promises-book/44256