想一想以前咱們用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 });