JavaScript的异步编程之Promise _生活百科

Promise一种更优的异步编程统一方法，如果直接使用传统的回调函数去完成复杂操作就会形成回调深渊
// 回调深渊$.get('/url1'() => {$.get('/url2'() => {$.get('/url3'() => {$.get('/url4'() => {$.get('/url5'() => {// 大概就是这样子的})})})})})CommonJS 社区提出了 Promise 规范，在ES2015中被标准化，成为语言规范。当等待状态改编程成功或者失败之后就再也不能再被改变了，成功的时候触发onFulfilled 回调，失败的时候触发onRejected 回调

文章插图
Promise 简单使用new Promise 传入一个回调函数，这个回调函数两个参数，第一个把Promise 改成为成功的状态，第二个参数把Promise改变成失败的状态，捕获成功和异常可以使用.then和.catch方法，这两个方法返回的也是一个Promise对象

// 演示const promsie = new Promise((resolve, reject) => {reject(1)})promsie.then((value) => {console.log(value)}, (err) => {// end 执行完之后才会执行这个console.log(err)})// end 会先执行console.log('end')

不管Promise中有没有异步操作，then方法中的回调函数依然会进入回调队列中排队，会等同步代码执行完之后才会执行
用Promise写一个请求函数

function ajax (url) {return new Promise((resove, reject) => {var xhr = new XMLHttpRequest()xhr.open('GET', url)// 新方法可以直接接受一个j对象xhr.responseType = 'json'xhr.onload = function () {if (this.status === 200) {resove(this.response)} else {reject(new Error(this.statusText))}}xhr.send()})}ajax('/json1.json').then(ret => {console.log(ret)}).catch(err => {console.log(err)})

如果需要多个连续的请求可以使用链式调用

ajax('/json1.json').then(ret => {return ajax('/json2.json')}).then(ret => {return ajax('/json3.json')}).then(ret => {return ajax('/json4.json')})

这种链式调用是不是很熟悉，在jqeury中也有链式调用，jquery中是返回了本身这个对象所以可以实现链式调用，那么在Promise中是不是这样呢

 let promsie1 = ajax('/json1.json') let promise2 = promsie1.then(ret => {console.log(ret) }).catch(err => {console.log(err) }) console.log(promsie1 === promise2) // falselet a= $("body").attr('class', 'body')let b = a.prop('disabled', true)console.log(a === b) // true

经过测试发现， Promise返回的是一个全新的Promise对象，返回全新的Promise对象的目的就是为了实现Promise的链条，每个.then方法负责不同的任务，互不干扰，如果不断的链式调用then方法，这里的每个then方法都在为上一个then方法返回的Promise对象去添加状态明确后的回调，这些Promise会依次执行，而且我们可以在then方法中去手动返回一个Promise回调。如果then方法中的回调函数返回了值，则会给下一个then方法的回调函数传递这个返回的值，如果没有返回那么默认返回的就是undefined总结一下就是

Promise对象的then方法会返回一个全新的Promise对象
后面的then方法就是在为上一个then返回的Promise注册回调
前面的then方法中的回调函数的返回值回作为后面then方法回调的参数
如果回调中返回的是Promise, 那后面的then方法的回调会等待他的结束

捕获异常onRejected 回调会在Promise执行异常或者抛出的异常时触发，捕获异常有两种方式，第一种, then(成功处理的回调函数, 异常处理的回调函数) 在then方法中传递两个回调函数，第二种用.catch 方法去捕获异常，catch方法其实就是then方法的别名，相当于then方法第一个参数传undefined

// then(成功处理的回调函数, 异常处理的回调函数)ajax('/json1.json').then(ret => {console.log(err)}, err => {console.log(err)})// catchajax('/json1.json').then(ret => {console.log(err)}).catch(err => {console.log(err)})// catchajax('/json1.json').then(ret => {console.log(err)}).then(undefined,err => {console.log(err)})

这两种方式还是有很大的差异，catch 其实是在给上一个