promise處理多個(gè)相互依賴的異步請(qǐng)求(實(shí)例講解)

更新時(shí)間：2017年08月03日 07:58:29 投稿：jingxian

下面小編就為大家?guī)?lái)一篇promise處理多個(gè)相互依賴的異步請(qǐng)求(實(shí)例講解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

在項(xiàng)目中，經(jīng)常會(huì)遇到多個(gè)相互依賴的異步請(qǐng)求。如有a,b,c三個(gè)ajax請(qǐng)求，b需要依賴a返回的數(shù)據(jù)，c又需要a和b請(qǐng)求返回的數(shù)據(jù)。如果采用請(qǐng)求嵌套請(qǐng)求的方式自然是不可取的。導(dǎo)致代碼難以維護(hù)，如何請(qǐng)求很多。會(huì)出現(xiàn)很多問(wèn)題。

Promise就是解決多個(gè)異步請(qǐng)求的問(wèn)題。 Promise是ES6提供的一個(gè)對(duì)象，用來(lái)傳遞異步操作的消息。

Promise有三種狀態(tài)：Pending（進(jìn)行中）、Resolved（已完成，又稱 Fulfilled）和 Rejected（已失?。?/p>

直接上代碼。有a,b請(qǐng)求，b依賴a的請(qǐng)求數(shù)據(jù)。如下：

function a(){
      return new Promise(function(res,rej){
        $.ajax({
          url:"a",
          type: "GET",
          async:true,
          dataType:"json",
          success:function(data){
            console.log(data,"a");
            res(data);
          }
        })
      });
    }
    function b(data){
      console.log(data,"data");
      return new Promise(function(res,rej){
        $.ajax({
            url:"b",
            type: "POST",
            async:true,
            data:JSON.stringify(data),
            dataType:"json",
            success:function(data){
              console.log(data,"b");
              res();
            }
          })
      });
    }
    $("#btn").click(function(){
      a().then(function (data){
        b(data);
      }).then(function(){
      })
    })

接口url在網(wǎng)上找了一個(gè)，可以看運(yùn)行結(jié)果：

以上這篇promise處理多個(gè)相互依賴的異步請(qǐng)求(實(shí)例講解)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

用JavaScript和注冊(cè)表腳本實(shí)現(xiàn)右鍵收藏Web頁(yè)選中文本
用JavaScript和注冊(cè)表腳本實(shí)現(xiàn)右鍵收藏Web頁(yè)選中文本...
2007-01-01
Vue使用Canvas繪制圓與半圓的示例詳解
在?Canvas?中,基本圖形包括直線圖形和曲線圖形,在我們的工作中,經(jīng)常在統(tǒng)計(jì)圖中會(huì)看到有餅狀圖等這樣的圓弧圖形,當(dāng)然繪制曲線圖形那么我們要知道曲線圖形的繪制往往會(huì)涉及到曲線與弧線,所以本文就給大家介紹一下Canvas繪制圓與半圓的方法
2023-08-08
javascript中創(chuàng)建對(duì)象的三種常用方法
在javascript中創(chuàng)建對(duì)象的三種方法，腳本之家以前發(fā)布過(guò)有簡(jiǎn)單實(shí)例版的，大家可以參考下。
2010-12-12
常見(jiàn)表單重復(fù)提交問(wèn)題整理及解決方法
常見(jiàn)的重復(fù)提交問(wèn)題如點(diǎn)擊提交按鈕兩次、點(diǎn)擊刷新按鈕等等，下面為大家整理了防止表單重復(fù)提交的方法，感興趣的朋友可以參考下
2013-11-11
ES6中Promise的使用方法實(shí)例總結(jié)
這篇文章主要介紹了ES6中Promise的使用方法,結(jié)合實(shí)例形式總結(jié)分析了Promise對(duì)象中的各種常用方法及基本使用技巧,需要的朋友可以參考下
2020-02-02
Javascript-Mozilla和IE中的一個(gè)函數(shù)直接量的問(wèn)題分析
Javascript-Mozilla和IE中的一個(gè)函數(shù)直接量的問(wèn)題分析...
2007-08-08
uni-app微信小程序登錄授權(quán)的實(shí)現(xiàn)
這篇文章主要介紹了uni-app微信小程序登錄授權(quán)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-05-05
TypeScript中import?type與import的區(qū)別詳析
ES6引入了模塊化,其設(shè)計(jì)思想是在編譯時(shí)就能確定模塊的依賴關(guān)系,以及輸入和輸出的變量,下面這篇文章主要給大家介紹了關(guān)于TypeScript中import?type與import區(qū)別的相關(guān)資料,需要的朋友可以參考下
2022-07-07
捕獲和分析JavaScript Error的方法
這篇文章主要介紹了如何捕獲和分析 JavaScript Error，感興趣的朋友可以參考下
2014-03-03
JavaScript建立一個(gè)語(yǔ)法高亮輸入框?qū)崿F(xiàn)思路
通常網(wǎng)站自帶的textarea編輯器不能滿足我們的需求比如高亮顯示代碼等,在這篇文章中，我將使用JavaScript庫(kù)ACE來(lái)創(chuàng)建一個(gè)輸入框效果,該腳本允許開(kāi)發(fā)人員創(chuàng)建支持語(yǔ)法高亮的輸入框,感興趣的你可不要錯(cuò)過(guò)了哈
2013-02-02