1. 程式人生 > >阿里前端測試題--關於ES6中Promise函式的理解與應用

阿里前端測試題--關於ES6中Promise函式的理解與應用

今天做了阿里前端的筆試題目,原題目是這樣的

//實現mergePromise函式,把傳進去的陣列順序先後執行,
//並且把返回的資料先後放到陣列data中

const timeout = ms => new Promise((resolve, reject) => {
setTimeout(() => {
resolve();
}, ms);
});

const ajax1 = () => timeout(2000).then(() => {
console.log('1');
return 1;
});

const ajax2 = () => timeout(1000).then(() => {
console.log('2');
return 2;
});

const ajax3 = () => timeout(2000).then(() => {
console.log('3');
return 3;
});

const mergePromise = ajaxArray => {
// 在這裡實現你的程式碼

};

mergePromise([ajax1, ajax2, ajax3]).then(data => {
console.log('done');
console.log(data); // data 為 [1, 2, 3]
});

// 分別輸出
// 1
// 2
// 3
// done
// [1, 2, 3]

從網上找到的答案我寫貼上:

var data = [];
var sequence = Promise.resolve();
ajaxArray.forEach(function(item){
  sequence = sequence.then(item).then(function(res){
    data.push(res);
    return data;
  });
})

return sequence;

解答思路和原理有空再研究貼上來。

更新--思路解析:

  首先理解一下javascript的執行機制--非同步執行,也就是說兩個並列函式的執行順序不會先執行完第一個,再執行後一個。舉個栗子:

func A(){

  setTimeout(function(){

    console.log('a');

},3000);

}

func B(){

  setTimeout(function(){

    console.log('b');

},1000);

}

A();

B();

那麼你覺得輸出結果是啥?不妨試下,會輸出b,a.

原因就是非同步執行。當執行到A函式時,會註冊一個三秒後執行的函式,直接去執行B,而不是等三秒執行完A再去執行B。

promise可以實現同步執行

先說一下使用方法吧:promise和then配合使用,類似於回撥函式,執行完promise之後才會執行then的內容

new Promise((resolve, reject) {

}).then(function(){

}).then(function(){})...

promise裡面的兩個引數表示promise的執行狀態

但是值得注意的是then裡面的東西可不是同步執行,並不是前一個執行完再執行後一個,then之間還是遵循非同步原則的。

所以JavaScript、nodejs想要實現同步,各路神仙都有自己不同的理解和套路。

後續更新。

相關推薦

阿里前端測試題--關於ES6Promise函式理解應用

今天做了阿里前端的筆試題目,原題目是這樣的 //實現mergePromise函式,把傳進去的陣列順序先後執行,//並且把返回的資料先後放到陣列data中const timeout = ms => new Promise((resolve, reject) => {setTimeout(() =

斯坦福大學深度學習公開課cs231n學習筆記(1)softmax函式理解應用

<div id="article_content" class="article_content clearfix csdn-tracking-statistics" data-pid="blog" data-mod="popu_307" data-dsm="post"

es6promise ALL Race Resolve Reject finish的實現

success eject you his rip elf prot fail n) function mypromise(func){ this.statue = "pending"; this.data = null;

ES6 Promise 詳解

out 保持 type xxxxx 承諾 操作 結束 span aso Promise,簡單說就是一個容器,裏面保存著某個未來才會結束的事件(通常是一個異步操作)的結果。從語法上說,Promise 是一個對象,從它可以獲取異步操作的消息。 Promise 提供統一的 API

ES6函式和陣列補漏

物件的函式解構 我們在前後端分離時,後端經常返回來JSON格式的資料,前端的美好願望是直接把這個JSON格式資料當作引數,傳遞到函式內部進行處理。ES6就為我們提供了這樣的解構賦值。 let json={ a:'leiy', b:'ly' } function fun({a,b="yu"})

ES6 promise非同步載入的用法

1:單個promise     let p=new Promise(function (resolve, reject){       $.ajax({         url: 'data/arr2.tx

JavaScriptPromise函式then的奧祕探究

Promise概述 Promise物件是CommonJS工作組提出的一種規範,目的是為非同步操作提供統一介面。 那麼,什麼是Promises? 首先,它是一個物件,也就是說與其他JavaScript物件的用法,沒有什麼兩樣;其次,它起到代理作用(proxy),充當非

三十四、ES6箭頭函式的使用

1、單引數箭頭函式 ES6中允許使用“箭頭”(=>)定義函式: var f = v => v; 以上程式碼相當於: var f = function( v ) { return v; } “箭頭”(=>)後面是函式體,“箭頭”(=>

前端之js函式

函式 函式就是重複執行的程式碼片。   函式定義與執行 <script type="text/javascript">     // 函式定義     fu

探究JSPromise函式then的奧祕

Promise概述 Promise物件是CommonJS工作組提出的一種規範,目的是為非同步操作提供統一介面。 那麼,什麼是Promises? 首先,它是一個物件,也就是說與其他JavaScript物件的用法,沒有什麼兩樣;其次,它起到代理作用(proxy),充當非同步操作與回撥

es6箭頭函式 注意點

var aaabbb = 'kkkooo' setTimeout(()=>{ var aaaa = 'kkkk'; console.log(this) },1000); 因為據我瞭解,箭頭函式指向是建立時候上下文的this指向,所以天真的認為上述函式中在箭頭函式內部建立的變數

ES6 promise的使用

一 對promise的理解   js中promise主要用於非同步執行的場景,兩個回撥函式resolve,reject。 二 用法   1.一般使用 1 function loadImg(url){ //定義一個函式 2 return new Promis

ES6 高階箭頭函式理解函式柯里化

前言:第一次看到多個連續箭頭函式是在一個 react 專案中,然鵝確認了下眼神,並不是對的人,因為看得一臉懵逼。em......於是開始各種搜尋,先是知道了多個連續箭頭函式就是 es6 的多次柯里化的寫法,對於函式柯里化,很久以前就知道這個名次,但是並不理解,也沒有去了解。為了弄明白多個連續箭頭函式,開始

ES6promise函式用法講解

  總結:Promise函式的出現極大的解決了Js中的非同步呼叫程式碼邏輯編寫太過複雜的問題,Promise物件讓非同步呼叫函式的流程顯得更加的優雅,也更容易編寫。   舉例:     1. 非同步呼叫:       假設現在我的一個頁面中的一條資料需要我去後臺查詢兩個接口才能完全返回,廢話不說下面上程

ConcurrentHashMaprehash函式理解

最近看了ConcurrentHashMap的原始碼,對於這個類的整體原理的講解,請參考 探索 ConcurrentHashMap 高併發性的實現機制     這篇文章將ConcurrentHashMap的工作機制已經講得很清楚了,結合原始碼和相關注釋,就可以很好地理解這個類

OpenCV2.4.13warpAffine函式理解,旋轉,仿射變換,縮放,保持完整圖片

本文借鑑了這裡以及這裡的內容。 問題:為什麼寫這個東西? 答:在進行模板匹配的時候,發現一個問題,對於直接從圖片中摳出的模板,匹配效果較好,但是當模板發生形變的時候,效果就不理想了。 在對模板進行形變處理的時候,發現利用 warpAffine得到的結果並不

ES6Promise的用法

1、promise是一個建構函式,那就new一個出來 var p = new Promise(function(resolve,reject){    //做一些非同步操作    setTimeout(function(){        console.log("執行完成

ES5,ES6箭頭函式,物件定義this的總結

最近在學ES6的時候,發現使用箭頭函式的時候的this指向不太清楚,和普通的物件建立做了一些對比,講講自己的理解,有問題希望大家和我一起討論研究 箭頭函式 和 function(){}定義的區別,箭頭函式的 這裡的所有程式碼基於chrome進行測試  這裡有幾個帖子是作為參考的

關於 ES6 Promise 的面試題

說明 最近在複習 Promise 的知識,所以就做了一些題,這裡挑出幾道題,大家一起看看吧。 題目一 const promise = new Promise((resolve, reject) => { console.log(1); re

原生Ajax寫法和ES6Promise結合Ajax寫法

原生AJAX var Ajax={ get: function(url, fn) { // XMLHttpRequest物件用於在後臺與伺服器交換資料 var xhr = new XMLHttpRequest(); xhr.open('G