帶你玩轉 JavaScript ES6 (七) - 異步

he_xd 發布于2019-08-26 11:38 / 3168人閱讀

摘要：說明處理方法被異步執行了。意味著操作成功完成。狀態的對象可能觸發狀態并傳遞一個值給相應的狀態處理方法，也可能觸發失敗狀態并傳遞失敗信息。注生命周期相關內容引用自四使用和異步加載圖片這是官方給出的示例，部分的代碼如下

帶你玩轉 JavaScript ES6 (七) - 異步

本文同步帶你玩轉 JavaScript ES6 (七) - 異步，轉載請注明出處。

本章我們將學習 ES6 中的 Promise(異步) 相關知識，了解如何使用 Promise 對象創建異步程序

一、介紹

Promise 對象通過 new Promise(executor) 實例化創建，可以讓程序進入一個異步的執行中，完成耗時的操作處理。

二、語法 2.1 實例化

語法：new Promise((resole, reject) => {})

Promise 類接收帶有兩個匿名函數作為參數的匿名函數，其中 resolve 表示成功處理函數，reject 表示失敗處理函數

let promise = new Promise((resole, reject) => {
    console.log("main")
    setTimeout(() => {
        resole("run async")
    }, 1500)
})

2.2 異步成功執行處理方法

通過 Promise 對象的 then 方法綁定 resolve處理方法，可以通過鏈式操作綁定多個用于 resolve 的處理方法

let promise = new Promise((resole, reject) => {
    console.log("main")
    setTimeout(() => {
        resole("run async")
    }, 1500)
})

promise.then((msg) => {
    console.log(msg);
})

上面示例會先打印輸出 mian，之后過 1.5 s 會打印輸出 run async 到控制臺。為了演示異步執行，現在對上例稍作調整：

let promise = new Promise((resole, reject) => {
    resole("run async")
    console.log("main")
})

promise.then((msg) => {
    console.log(msg);
})

我們首先將 resolve("run async") 調用移至 console.log("main") 之前。

如果是同步調用按照執行順序，會先輸出 run async 再輸出 main，但情況相反。說明 resolve 處理方法被異步執行了。

2.3 異步失敗執行處理方法

通過使用 Promise 對象的 catch 方法綁定 reject 處理方法。

let promise = new Promise((resole, reject) => {
    //resole("run async")
    reject("run async error")
    console.log("main")
})

promise.then((msg) => {
    throw new Error("error")
    console.log(msg);

}).catch(() => {
    console.log("error")
})

三、 Promise 生命周期

一個 Promise有以下幾種狀態:

pending: 初始狀態，既不是成功，也不是失敗狀態。

fulfilled: 意味著操作成功完成。

rejected: 意味著操作失敗。

pending 狀態的 Promise 對象可能觸發fulfilled 狀態并傳遞一個值給相應的狀態處理方法，也可能觸發失敗狀態（rejected）并傳遞失敗信息。

當其中任一種情況出現時，Promise 對象的 then 方法綁定的處理方法（handlers ）就會被調用（then方法包含兩個參數：onfulfilled 和 onrejected，它們都是 Function 類型。當Promise狀態為fulfilled時，調用 then 的 onfulfilled 方法，當Promise狀態為rejected時，調用 then 的 onrejected 方法，所以在異步操作的完成和綁定處理方法之間不存在競爭）。

注: Promise 生命周期相關內容引用自 Promise

四、使用 Promise 和 XHR 異步加載圖片

這是 MDN 官方給出的示例，JavaScript 部分的代碼如下

  function imgLoad(url) {
    // Create new promise with the Promise() constructor;
    // This has as its argument a function
    // with two parameters, resolve and reject
    return new Promise(function(resolve, reject) {
      // Standard XHR to load an image
      var request = new XMLHttpRequest();
      request.open("GET", url);
      request.responseType = "blob";
      // When the request loads, check whether it was successful
      request.onload = function() {
        if (request.status === 200) {
        // If successful, resolve the promise by passing back the request response
          resolve(request.response);
        } else {
        // If it fails, reject the promise with a error message
          reject(Error("Image didn"t load successfully; error code:" + request.statusText));
        }
      };
      request.onerror = function() {
      // Also deal with the case when the entire request fails to begin with
      // This is probably a network error, so reject the promise with an appropriate message
          reject(Error("There was a network error."));
      };
      // Send the request
      request.send();
    });
  }
  // Get a reference to the body element, and create a new image object
  var body = document.querySelector("body");
  var myImage = new Image();
  // Call the function with the URL we want to load, but then chain the
  // promise then() method on to the end of it. This contains two callbacks
  imgLoad("myLittleVader.jpg").then(function(response) {
    // The first runs when the promise resolves, with the request.response
    // specified within the resolve() method.
    var imageURL = window.URL.createObjectURL(response);
    myImage.src = imageURL;
    body.appendChild(myImage);
    // The second runs when the promise
    // is rejected, and logs the Error specified with the reject() method.
  }, function(Error) {
    console.log(Error);
  });

云服務器 GPU云服務器教你玩轉html5 javascript異步函數 JavaScript異步機制 javascript異步編程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/107271.html

帶你玩轉 JavaScript ES6 (六) - Map 映射

摘要：初始化申明一個設置和獲取值使用設置新值或更新值申明設置值張三豐張三豐重復設置值如果鍵值存在則新值替換舊值張三豐使用獲取值，如果獲取的不存在返回分別獲取判斷是否存在使用判斷給定是否存在映射內。本文同步帶你入門帶你玩轉 JavaScript ES6 (六) - Map 映射，轉載請注明出處。本章我們講學習 ES6 中的 Map(映射)。上一章節我們學習了 [Set(集合)]()的相關...

acrazing 2019-08-22 14:02 評論0 收藏0
帶你玩轉css3的3D！

摘要：透視即是以現實的視角來看屏幕上的事物，從而展現的效果。旋轉則不再是平面上的旋轉，而是三維坐標系的旋轉，就包括軸，軸，軸旋轉。必須與屬性一同使用，而且只影響轉換元素。可自由轉載引用，但需署名作者且注明文章出處。 showImg(https://segmentfault.com/img/bVzJoZ); 話不多說，先上demo 酷炫css3走馬燈/正方體動畫： https://bupt-...

Panda 2019-08-29 11:03 評論0 收藏0
帶你玩轉css3的3D！

摘要：透視即是以現實的視角來看屏幕上的事物，從而展現的效果。旋轉則不再是平面上的旋轉，而是三維坐標系的旋轉，就包括軸，軸，軸旋轉。必須與屬性一同使用，而且只影響轉換元素。可自由轉載引用，但需署名作者且注明文章出處。 showImg(https://segmentfault.com/img/bVzJoZ); 話不多說，先上demo 酷炫css3走馬燈/正方體動畫： https://bupt-...

archieyang 2019-08-01 15:32 評論0 收藏0
帶你玩轉Postman的集合

摘要：選擇選項，可以添加名稱和描述的數據，以便其他用戶了解你的相關信息，如圖創建一個新集合。如果用戶正在處理一些特定的集合，可以單擊圖標將集合置頂，如圖過濾集合。集合...

Bowman_han 2021-11-22 09:34 評論0 收藏0
老司機【分享】帶你玩轉阿里云服務器

摘要：阿里云是國內云服務器市場的龍頭，性價比高，速度快又安全，是站長建站首選的云服務器之一。作為一個老司機，福利吧也和大家分享一下我的阿里云推廣經驗，教大家如何免費推廣云大使。阿里云是國內云服務器市場的龍頭，性價比高，速度快又安全，是站長建站首選的云服務器之一。福利吧使用的也是阿里云服務器，是折騰了很多次網站搬家后，才選擇了阿里云。身邊好幾個站長最后都殊途同歸，用了阿里云，可見阿里云服務器性能確實...

banana_pi 2019-04-24 19:23 評論0 收藏0