正文
Promise用法总结
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
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
