现在前端开发基本都是通过后端接口来渲染页面,在一些页面,往往接口之间都存在依赖关系. 比如一个就诊人页面,在一个页面首先要请求就诊人列表,然后根据就诊人的id获取,就诊人的列表信息,然后,点击列表的某条信息显示详情,大致就会形成这种写法
$.ajax({ url: url, data: data, success: function(data){ if(data.code === 'ok'){ $.ajax({ url:url, data:data, success:function(data){ if(data.code === 'ok'){ $.ajax({ url:url, data:data, success:function(data){ // do something } }) } } }) } },});
这也就是常说的回调地狱,代码看上去结构十分混乱 es6里面一个新属性很受欢迎----promise
promise 提供了以下方法:
- Promise.prototype.catch()
- Promise.prototype.then()
- Promise.all(),
- Promise.race(),
- Promise.reject(),
- Promise.resolve()方法
Promise.resolve() 实例
function p(str){ return new Promise((resolve, reject) => { resolve(str) }).then( data => { console.log(`sucess:${data}`) }, data => { console.log(`error:${data}`) } ) }; p('hello world'); // 打印出 sucess:hello world
Promise.race()实例
var p1 = new Promise(function(resolve, reject) { setTimeout(resolve, 500, 'one'); });var p2 = new Promise(function(resolve, reject) { setTimeout(resolve, 100, 'two'); });Promise.race([p1, p2]).then(function(value) { console.log(value); // "two" // Both resolve, but p2 is faster});// 输出 two
Promise.prototype.catch() 实例
var p1 = new Promise(function(resolve, reject) { resolve('Success');});p1.then(function(value) { console.log(value); // "Success!" throw 'oh, no!';}).catch(function(e) { console.log(e); // "oh, no!"}).then(function(){ console.log('after a catch the chain is restored');}, function () { console.log('Not fired due to the catch');});// 依次输出 Success-->oh, no!--->after a catch the chain is restored
Promise.reject() 实例
function p(str){ return new Promise((resolve, reject) => { reject(str) }).then( data => { console.log(`sucess:${data}`) }, data => { console.log(`error:${data}`) } ) }; p('hello world'); // 打印出 error:hello world
Promise.all() 实例
var p1 = Promise.resolve(3); var p2 = 1337; var p3 = new Promise((resolve, reject) => { setTimeout(function(){ resolve('foo') },1000) }); Promise.all([p1, p2, p3]).then(values => { console.log(values); }); // 依次打印出 [3, 1337, "foo"]
回调函数真正的问题在于他剥夺了我们使用 return 和 throw 这些关键字的能力。而 Promise 很好地解决了这一切 所谓 Promise,就是一个对象,用来传递异步操作的消息。它代表了某个未来才会知道结果的事件(通常是一个异步操作),并且这个事件提供统一的 API,可供进一步处理。
Promise 对象有以下两个特点。
- 对象的状态不受外界影响。Promise 对象代表一个异步操作,有三种状态:Pending(进行中)、Resolved(已完成,又称 Fulfilled)和 Rejected(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。这也是 Promise 这个名字的由来,它的英语意思就是「承诺」,表示其他手段无法改变。
- 一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise 对象的状态改变,只有两种可能:从 Pending 变为 Resolved 和从 Pending 变为 Rejected。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果。就算改变已经发生了,你再对 Promise 对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。有了 Promise 对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。此外,Promise 对象提供统一的接口,使得控制异步操作更加容易。
Promise 缺点
Promise 也有一些缺点。首先,无法取消 Promise,一旦新建它就会立即执行,无法中途取消。其次,如果不设置回调函数,Promise 内部抛出的错误,不会反应到外部。第三,当处于 Pending 状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。
异步操作是 JavaScript 编程的麻烦事,虽然Promise改进了,异步操作的的使用方式,但是还是不够彻底,如果让异步编程写起来更优雅,做到不用关心它s是不是异步, async/await是最终解决方法
实例
var f = function(str,t){ return new Promise((resolve, reject) => { setTimeout(() => { resolve(str) },t) }).then( data => { console.log(data) } )};async function a(){ await f('one', 3000); await f('two', 1000)};// 输出 one two
用async/await 我们不用关心一个接口成功所需要的时间,让我们编写异步代码更优雅
使用async/await需要注意两点:
1.async/await 必须是promise对象
2. 不能隔断async/await的上下文