摘要:一涉及技術(shù)二簡介官方文檔三種狀態(tài)進(jìn)行中已完成,又稱已失敗只有異步操作的結(jié)果,可以決定當(dāng)前是哪一種狀態(tài),任何其他操作都無法改變這個狀態(tài)。
一、涉及技術(shù)
jquery、vue、php
二、Promise簡介MDN官方文檔:Promise
三種狀態(tài):
Pending(進(jìn)行中)
Resolved(已完成,又稱 Fulfilled)
Rejected(已失敗)
只有異步操作的結(jié)果,可以決定當(dāng)前是哪一種狀態(tài),任何其他操作都無法改變這個狀態(tài)。
三、常用方法Promise.resolve()
Promise.reject()
Promise.prototype.catch()
Promise.prototype.then()
Promise.all()
Promise.race()
四、簡單示例 1、多個Promise使用var promise = new Promise(function(resolve, reject) { setTimeout(function() { resolve("hello"); }, 1000); }); promise.then(function(str) { return new Promise(function(resolve, reject) { setTimeout(function() { resolve(str+" world"); }, 1000); }); }).then(function(str) { return new Promise(function(resolve, reject) { setTimeout(function() { resolve(str+" !"); }, 1000); }); }).then(function(str) { console.log(str); // 3秒后打印 hello world ! });2、catch與finaly
var promise = new Promise(function(resolve, reject) { setTimeout(function() { reject("異步報錯~"); }, 1000); }).catch(function(err) { // 捕獲reject暴露的錯誤 console.log(err); }).finally(function() { // 不管resolve/reject都執(zhí)行 console.log("complete"); });五、前后端配合 1、單個Promise
后端數(shù)據(jù)
demo.php
// 獲取隨機(jī)字符串 function getRandChar($length) { $str = ""; $strPol = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyz"; $max = strlen($strPol)-1; for($i=0;$i<$length;$i++){ $str.=$strPol[rand(0,$max)]; } return $str; } if($_GET["action"] == "test") { $data = [ ["name"=>getRandChar(6), "age"=>rand(1,50)], ["name"=>getRandChar(6), "age"=>rand(1,50)], ["name"=>getRandChar(6), "age"=>rand(1,50)], ["name"=>getRandChar(6), "age"=>rand(1,50)], ]; echo json_encode($data); }
前端頁面
demo.html
promise
- {{ index }} {{ item.name }}
運(yùn)行結(jié)果:
2、Promise.all()Promise.all(p1, p2, ...),此方法需要所有的promise都成功才成功。。
var promise1 = new Promise(function(resolve, reject) { $.ajax({ type: "get", url: "demo.php?action=test", dataType: "json", success: function(res) { resolve(res); }, error: function() { reject("請求報錯~"); } }); }); var promise2 = new Promise(function(resolve, reject) { $.ajax({ type: "get", url: "demo.php?action=test", dataType: "json", success: function(res) { resolve(res); }, error: function() { reject("請求報錯~"); } }); }); var promiseAll = Promise.all([promise1, promise2]); promiseAll.then(function(data) { console.log(data); }, function(err) { console.log(err); });
結(jié)果
如果我們把其中一個url 改成 demo2.php?action=test 就會請求失敗~
Promise.all() 和 jquery的$.when() 有些類似
$.when()的寫法
var ajax1 = $.ajax({type: "get", url: "demo1.php", data: {}, dataType: "json"}), ajax2 = $.ajax({type: "get", url: "demo2.php", data: {}, dataType: "json"}), ajax3 = $.ajax({type: "get", url: "demo3.php", data: {}, dataType: "json"}); $.when([ajax1, ajax2, ajax3]).then(function(data1, data2, data3) { console.log(data1, data2, data3); }, function() { console.log("%c 請求報錯~", "color: red"); });3、Promise.race()
Promise.race(p1, p2, ...),這個方法會返回率先成功的那個,如果都不成功,則執(zhí)行reject。
var promise1 = new Promise(function(resolve, reject) { $.ajax({ type: "get", url: "demo.php?action=test", dataType: "json", success: function(res) { resolve(res); }, error: function() { reject("請求報錯~"); } }); }); var promise2 = new Promise(function(resolve, reject) { $.ajax({ type: "get", url: "demo.php?action=test", dataType: "json", success: function(res) { resolve(res); }, error: function() { reject("請求報錯~"); } }); }); var promiseRase = Promise.race([promise1, promise2]); promiseRase.then(function(data) { console.log(data); }, function(err) { console.log(err); });4、多個ajax請求
var app = new Vue({ el: "#app", data: { list: [] }, methods: { ajaxReq: function(resolve, reject) { $.ajax({ type: "get", url: "demo.php?action=test", dataType: "json", success: function(res) { resolve(res); }, error: function() { reject("請求報錯~"); } }); } }, mounted: function() { var promise1 = new Promise((resolve, reject) => { this.ajaxReq(resolve, reject); }); promise1.then((data)=> { console.log("第一次:", data); return new Promise((resolve, reject) => { this.ajaxReq(resolve, reject); }); }).then((data) => { console.log("第二次:", data); return new Promise((resolve, reject) => { this.ajaxReq(resolve, reject); }); }).then((data) => { console.log("第三次:", data); }); } });
這是使用了函數(shù)封裝,實(shí)際上項目中,可能不是這樣的,連貫操作,可能是下一個請求需要上一個請求的返回值
var promise1 = new Promise((resolve, reject) => { $.ajax({ type: "get", url: "demo.php?action=test", dataType: "json", success: function(res) { resolve(res, 2); }, error: function() { reject("請求報錯~"); } }); }); promise1.then((data)=> { if(data.length > 0) { return new Promise((resolve, reject) => { $.ajax({ type: "get", url: "demo.php?action=test", dataType: "json", success: function(res) { resolve(res.concat(data)); // 因為resolve只能接口一個參數(shù),所以concat了一下 }, error: function() { reject("請求報錯~"); } }); }); } }).then((data1) => { console.log(data1); });
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/89384.html
摘要:一簡介函數(shù)是引入的新型函數(shù),用于異步編程,跟對象聯(lián)合使用的話會極大降低異步編程的編寫難度和閱讀難度。二簡單示例和注意函數(shù)不能直接使用,是通過方法獲取的返回結(jié)果,而可以提前終止函數(shù)。 一、簡介 Generator函數(shù)是ES6引入的新型函數(shù),用于異步編程,跟Promise對象聯(lián)合使用的話會極大降低異步編程的編寫難度和閱讀難度。 與普通函數(shù)的區(qū)別: function關(guān)鍵字與函數(shù)名之間有一個...
摘要:指的是計算機(jī)系統(tǒng)的一種運(yùn)行機(jī)制。環(huán)境中的執(zhí)行順序是隨機(jī)的這一次,徹底弄懂執(zhí)行機(jī)制的規(guī)范和實(shí)現(xiàn) showImg(https://segmentfault.com/img/remote/1460000012913034?w=800&h=421); Event Loop指的是計算機(jī)系統(tǒng)的一種運(yùn)行機(jī)制。JavaScript采用此機(jī)制解決單線程引發(fā)相關(guān)問題 在瀏覽器中的web應(yīng)用會涉及到.Jav...
摘要:最近看了一下項目,它是基于創(chuàng)建的項目創(chuàng)建項目安裝默認(rèn)手動選擇配置,看個人項目需求支持使用書寫源碼支持。支持代碼風(fēng)格檢查和格式化。權(quán)限驗證那里也做了遞歸的處理不顯示在菜單欄。組件內(nèi)的在組件內(nèi)使用可以拿到 最近看了一下vue-element-admin項目,它是基于vue-cli3創(chuàng)建的項目 創(chuàng)建vue-cli3項目 安裝vue-cli npm install -g @vue/cli v...
閱讀 1246·2021-09-01 10:30
閱讀 2118·2021-07-23 10:38
閱讀 895·2019-08-29 15:06
閱讀 3151·2019-08-29 13:53
閱讀 3277·2019-08-26 11:54
閱讀 1822·2019-08-26 11:38
閱讀 2370·2019-08-26 10:29
閱讀 3128·2019-08-23 18:15