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

转载于:https://www.cnblogs.com/mengff/p/9646392.html

Promise用法总结相关推荐

boost::fibers::promise用法的测试程序
boost::fibers::promise用法的测试程序实现功能 C++实现代码实现功能 boost::fibers::promise用法的测试程序 C++实现代码 #include <b ...
promise用法_图解 Promise 实现原理（四）：Promise 静态方法实现
作者:Morrain 转发链接:https://mp.weixin.qq.com/s/Lp_5BXdpm7G29Z7zT_S-bQ 前言 Promise 是异步编程的一种解决方案,它由社区最早提出和实 ...
promise用法_图解 Promise 实现原理（一）—— 基础实现
本文首发于 vivo互联网技术微信公众号链接: https://mp.weixin.qq.com/s/UNzYgpnKzmW6bAapYxnXRQ 作者:孔垂亮很多同学在学习 Promise 时 ...
js的promise用法
js中的promise是一个异步编程的解决方案,语法层面上他是一个构造函数,名字为Promise(). 他的作用就是将一个任务task封装为一个Promise类的实例对象,这个对象会将任务自动运行并得 ...
浅析Promise用法
浅析Promise用法要理解Promise要知道没有Promise的回调地狱如何插入一段漂亮的代码片 Promise语法与then的用法所谓Promise,简单说就是一个容器,里面保存着某个未来 ...
ES6 promise 用法小结
ES6 promise 用法小结 Js 是一⻔单线程语言,早期解决异步问题,大部分是通过回调函数进行. 比如我们发送 ajax 请求,就是常见的一个异步场景,发送请求后,一段时间服务器给我们响应,然后 ...
Promise用法回顾
Promise用法回顾首先来回顾一下Promise是什么. Promise 是异步编程的一种解决方案,比传统的解决方案回调函数和事件更合理和更强大. 所谓Promise,简单说就是一个容器,里面保存 ...
vue页面取ajax返回值,Vue前端交互模式、Promise用法（回调地狱）
Promise 概述Promise 是异步编程的一种解决方案,从语法上讲,Promise 是一个对象,从它可以获取异步操作的消息. 优点:可以避免多层异步调用嵌套问题(回调地狱) Promise 对象 ...
promise用法_Promise的秘密
写在前面本篇文章将会带大家从分解promise入手,一步步实现一个promise.但阅读之前需要比较熟练地了解了解用法,结合用法看文章可能更容易理解. 结构先看一下简单的用法. const pro ...

Promise用法总结

Promise用法总结相关推荐

最新文章

热门文章