想一想以前咱们用jquery写请求的时候,要实现请求的串行执行,咱们多是这么作的。jquery
$.ajax({ url: '', data: '', success: function (data) { $.ajax({ url: '', data: '', success: function (data) { $.ajax({ // 如此一层嵌套一层 }) } }) } })
回掉嵌套的这么深,看起来很痛苦啊,因而乎咱们的promise出现啦,完美的解决咱们的回掉地狱~ajax
使用promise实现==串行==很简单,调用promise.all()方法就好promise
那如何比较优雅的实现几个操做的==串行==呐?dom
在promise中返回一个promise对象就是一个串行。
下面咱们来简单实现一个。url
下面 /** * 建立promise * @param {Number} value */ function makePromise (value) { return new Promise((resolve) => { setTimeout(() => { resolve(value); }, Math.random() * 1000) }) } /** * 打印结果 * @param {Number} value */ function print (value) { return value } let promises = [1, 3, 4, 5, 6].map((item, index) => { return makePromise(item) }); // 并行执行 Promise.all(promises) .then(() => { console.log('done') }) .catch(() => { console.log('error') }) // 串行执行 let parallelPromises = promises.reduce( (total, currentValue) => total.then(() => currentValue.then(print)),Promise.resolve() ) parallelPromises .then(() => { // console.log('done') }) .catch(() => { console.log('done') }) // 顺带复习一下reduce方法 reduce((total, currentValue, currentIndex, arr) => {}, initialValue) let arr1 = [1, 2, 3, 4, 5] let res = arr1.reduce((total, currentValue, currentIndex, arr) => { return total + currentValue });