ES6精解：promise用法

enali 發布于2019-08-22 18:10 / 3380人閱讀

前言

今天就簡單總結一下promise的用法，在用promise之前，我們要先了解一下什么promise，這個東西是用來干什么的？

通俗易懂的講，promise其實就是一個構造函數，是用來解決異步操作的，我們平時其實還是會用到挺多的，比如我們經常會嵌套一層層的函數

step1(function (value1) {

  step2(value1, function(value2){

    step3(value2,function(value3) {

      step4(value3,function(value4) {

        // ...

      });

    });

  });

});

傳統方法我們會這樣寫，但是如果用promise就會簡單很多，如下：

(new Promise(step1))

  .then(step2)

  .then(step3)

  .then(step4);

基本用法

   new Promise(function (resolve,reject) {
        console.log("promise準備階段");
        
        resolve("成功！");
        reject("失敗！");
    })

輸出結果：

promise準備階段

注意： promise總共有三個狀態，準備狀態，成功狀態，失敗狀態，這里面promise是剛剛定義，所以是進入準備狀態，因為每new一個promise都會進入準備狀態，我們還沒有運行就進入準備狀態了，所以，我們經常用一個函數給他包起來

  function asyncPro(){
        return new Promise(function (resolve,reject) {
            console.log("promise準備階段");
            resolve("成功！");
            reject("失敗！");
        });
    }
    asyncPro();

輸出結果：

promise準備階段

這里，只有調用asyncPro()，promise才開始new一個

上面，大家應該也注意到了在構建promise時，有兩個參數，resolve和reject，接下來我們重點講下這兩個

1. resolve講解

resolve其實就是異步操作成功時候執行的函數，當我們創建一個構造函數之后，成功執行之后，我們傳遞的參數要如何獲取呢？

function asyncPro(){
        return new Promise(function (resolve,reject) {
            console.log("promise準備階段");
            resolve("成功！");
            reject("失敗！");
        });
    }
    asyncPro().then(function (msg) {
        console.log(msg);
    });

輸出結果：

promise準備階段
成功！

注意： .then就是獲取成功時候獲取的數據

2. reject講解

上面resolve是成功的時候回調，那么reject就是失敗之后的回調

   function asyncPro(){
        return new Promise(function (resolve,reject) {
            console.log("promise準備階段");
            resolve("成功！");
            reject("失敗！");
        });
    }
    asyncPro().then(function (msg) {
        console.log(msg);
    }).catch(function (msg) {
        console.log(msg);
    });

這個一般只有在操作異常的時候才會回調，.catch就是reject的回調，一般我們可以不寫

好了，上面主要簡單了解一下promise，接下來用一個例子來總結一下

  function asyncPro(msg){
        return new Promise(function (resolve,reject) {
            console.log(msg+"：promise準備階段");
            resolve(msg+"成功！");
            reject(msg+"失敗！");
        });
    }
    asyncPro("第一步").then(function (msg) {
        console.log(msg);
        return asyncPro("第二步");
    }).then(function (msg) {
        console.log(msg);
        return asyncPro("第三步");
    }).then(function(msg){
        console.log(msg);
    });

輸出結果：

第一步：promise準備階段
第一步成功！
第二步：promise準備階段
第二步成功！
第三步：promise準備階段
第三步成功！

從上面代碼可以看出，promise對多層嵌套時有很大的幫助，可以對代碼很好的維護，當第一步執行完畢，要執行第二步的時候，return出第二步的函數，在下一個then中獲取返回的數據，以此類推。

以上是對promise用法簡單總結，后續會再補充。

GPU云服務器云服務器 es6中的promise promise用法精解 python算法精解

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

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

ES6精解：箭頭函數

摘要：基本用法在中允許使用來定義函數，如下就等同于從上面可以看出，在箭頭左側的是代表參數，若參數只有一個，可以省略，箭頭右側的表示函數代碼塊，若代碼塊里面是個返回值，則可以省略不寫無參數情況若箭頭函數不需要參數，則左側用代替，如下無參數情況無參數基本用法在ES6中允許使用 => 來定義函數，如下： var f = a => a; console.log(f(1)); //1 就...

HackerShell 2019-08-22 18:18 評論0 收藏0
ES6精解：let、const、塊級作用域

摘要：命令新增了命令，跟類似，都是用來聲明變量的不允許重復聲明報錯不存在變量提升報錯正確寫法為既要先定義，后面才能有這個值，否則會報錯，如果改成會提示未定義，但是就直接報錯了暫時性死區只要在塊級作用域里面存在則它所聲明的變量就綁定在這個塊級作用域 let命令 ES6新增了let命令，跟var類似，都是用來聲明變量的 1.不允許重復聲明 { let a = 1; let a =...

BWrong 2019-08-22 18:20 評論0 收藏0
ES6精解：變量的解構賦值

摘要：真正被賦值的是后者，而不是前者。第一行語句中，模式是取數組的第一個成員，跟圓括號無關第二行語句中，模式是，而不是第三行語句與第一行語句的性質一致。本文參考鏈接主要是看了阮一峰老師的文章，自己整理了一下，供后期自己看筆記用的 1.數組的解構賦值我們知道以前我們給一個變量賦值要這樣如下： let a = 1; let b = 2; let c = 3; 但是ES6出來之后，我們可以這樣：...

neu 2019-08-23 14:09 評論0 收藏0
JavaScript 編程精解中文第三版十一、異步編程

摘要：回調異步編程的一種方法是使執行慢動作的函數接受額外的參數，即回調函數。執行異步工作的函數通常會在完成工作之前返回，安排回調函數在完成時調用。它注冊了一個回調函數，當解析并產生一個值時被調用。來源：ApacheCN『JavaScript 編程精解中文第三版』翻譯項目原文：Asynchronous Programming 譯者：飛龍協議：CC BY-NC-SA 4.0 自豪地采用谷歌...

GeekQiaQia 2019-08-23 18:20 評論0 收藏0
JavaScript 編程精解中文第三版二十、Node.js

摘要：在這樣的程序中，異步編程通常是有幫助的。最初是為了使異步編程簡單方便而設計的。在年設計時，人們已經在瀏覽器中進行基于回調的編程，所以該語言的社區用于異步編程風格。來源：ApacheCN『JavaScript 編程精解中文第三版』翻譯項目原文：Node.js 譯者：飛龍協議：CC BY-NC-SA 4.0 自豪地采用谷歌翻譯部分參考了《JavaScript 編程精解（第 2 版）...

qqlcbb 2019-08-23 18:20 評論0 收藏0