石川es6課程---12、Promise

一、總結

一句話總結：

用同步的方式來書寫異步代碼，讓異步書寫變的特別簡單

用同步的方式來書寫異步代碼
Promise 讓異步操作寫起來，像在寫同步操作的流程，不必一層層地嵌套回調函數
改善了可讀性，對于多層嵌套的回調函數很方便
充當異步操作與回調函數之間的中介，使得異步操作具備同步操作的接口

?

1、傳統的異步寫法？

嵌套操作

ajax('./banners',function(banner_data){ajax('./hotItems',function(hotItem_data){ajax('./slides',function(slide_data){},function(){alert("讀取失敗")})},function(){alert("讀取失敗")}) },function(){alert("讀取失敗")})

?

?

2、傳統的同步操作數據？

同時只能做一件事

let banner_data=ajax_sync('./banners') let hotItem_data=ajax_sync('./hotItems') let slide_data=ajax_sync('./slides')傳統的同步操作數據

?

?

3、jquery中ajax方法的回調函數的作用是什么？

$.ajax是不同操作的回調函數，$.post是發送成功的回調函數

如果要處理$.ajax()得到的數據，則需要使用回調函數。beforeSend、error、dataFilter、success、complete。beforeSend 在發送請求之前調用，并且傳入一個XMLHttpRequest作為參數。 error 在請求出錯時調用。傳入XMLHttpRequest對象，描述錯誤類型的字符串以及一個異常對象（如果有的話） dataFilter 在請求成功之后調用。傳入返回的數據以及"dataType"參數的值。并且必須返回新的數據（可能是處理過的）傳遞給success回調函數。 success 當請求之后調用。傳入返回后的數據，以及包含成功代碼的字符串。 complete 當請求完成之后調用這個函數，無論成功或失敗。傳入XMLHttpRequest對象，以及一個包含成功或錯誤代碼的字符串。$.ajax({url: "test.html",cache: false,success: function(html){$("#results").append(html);}});

?

?

4、Promise實例？

用Promise.all()，全部成功一個回調函數，失敗一個回調函數

Promise.all()函數let p1=new Promise(function(resolve,reject){//異步代碼//resolve成功//reject失敗 $.ajax({url:'https://easy-mock.com/mock/5cadb508b56fc13f6206ad0e/example/arr.txt',type:'get',dataType:'json',success(arr){resolve(arr)},error(err){reject(err)}})})let p2=new Promise(function(resolve,reject){$.ajax({url:'https://easy-mock.com/mock/5cadb508b56fc13f6206ad0e/example/json.txt',dataType:'json',type:'get',success:function(data){resolve(data)},error:function(err){reject(err)}})})Promise.all([p1,p2]).then(function(arr){let [res1,res2]=arrconsole.log(res1,res2)},function(){alert("至少一個失敗")})

?

?

?

?

二、Promise

• 異步和同步

  • 異步，操作之間沒有關系，同時執行多個操作， 代碼復雜
  • 同步，同時只能做一件事，代碼簡單

• Promise 對象

  • 用同步的方式來書寫異步代碼
  • Promise 讓異步操作寫起來，像在寫同步操作的流程，不必一層層地嵌套回調函數
  • 改善了可讀性，對于多層嵌套的回調函數很方便
  • 充當異步操作與回調函數之間的中介，使得異步操作具備同步操作的接口

• Promise 也是一個構造函數

  • 接受一個回調函數f1作為參數，f1里面是異步操作的代碼
  • 返回的p1就是一個 Promise 實例
  • 所有異步任務都返回一個 Promise 實例
  • Promise 實例有一個then方法，用來指定下一步的回調函數

function f1(resolve, reject) {// 異步代碼... } var p1 = new Promise(f1); p1.then(f2); // f1的異步操作執行完成，就會執行f2。

• 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);

• Promise.all(promiseArray)方法
  • 將多個Promise對象實例包裝，生成并返回一個新的Promise實例
  • promise數組中所有的promise實例都變為resolve的時候，該方法才會返回
  • 并將所有結果傳遞results數組中
  • promise數組中任何一個promise為reject的話，則整個Promise.all調用會立即終止，并返回一個reject的新的promise對象

var p1 = Promise.resolve(1),p2 = Promise.resolve(2),p3 = Promise.resolve(3); Promise.all([p1, p2, p3]).then(function (results) {console.log(results); // [1, 2, 3] });

• Promise.race([p1, p2, p3])
  • Promse.race就是賽跑的意思
  • 哪個結果獲得的快，就返回那個結果
  • 不管結果本身是成功狀態還是失敗狀態

?

?

?

3、Promise

異步請求/操作

• 異步：操作之間沒有任何關系，可以同時進行多個操作
• 同步：同時只能做一件事

優缺點

• 異步缺點：代碼更復雜
• 同步優點：代碼簡單

//異步操作讀取數據 ajax('./banners',function(banner_data){ajax('./hotItems',function(hotItem_data){ajax('./slides',function(slide_data){},function(){alert("讀取失敗")})},function(){alert("讀取失敗")}) },function(){alert("讀取失敗")}) //同步操作數據 let banner_data=ajax_sync('./banners') let hotItem_data=ajax_sync('./hotItems') let slide_data=ajax_sync('./slides')

Promise——清除異步操作

• 本質：用同步一樣的方式寫異步
• 用法：?基本的封裝ajax

let p1=new Promise(function(resolve,reject){//異步代碼//resolve成功//reject失敗$.ajax({url:'https://easy-mock.com/mock/5cadb508b56fc13f6206ad0e/example/arr.txt',type:'get',dataType:'json',success(arr){resolve(arr)},error(err){reject(err)}})})p1.then(function(){},function(){})

Promise.all()函數

let p1=new Promise(function(resolve,reject){//異步代碼//resolve成功//reject失敗$.ajax({url:'https://easy-mock.com/mock/5cadb508b56fc13f6206ad0e/example/arr.txt',type:'get',dataType:'json',success(arr){resolve(arr)},error(err){reject(err)}})})let p2=new Promise(function(resolve,reject){$.ajax({url:'https://easy-mock.com/mock/5cadb508b56fc13f6206ad0e/example/json.txt',dataType:'json',type:'get',success:function(data){resolve(data)},error:function(err){reject(err)}})})Promise.all([p1,p2]).then(function(arr){let [res1,res2]=arrconsole.log(res1,res2)},function(){alert("至少一個失敗")})

通用封裝

function createPromise(url){return new Promise(function(resolve,reject){//異步代碼//resolve成功//reject失敗$.ajax({url:url,type:'get',dataType:'json',success(arr){resolve(arr)},error(err){reject(err)}})})}Promise.all([createPromise("https://easy-mock.com/mock/5cadb508b56fc13f6206ad0e/example/arr.txt"),createPromise("https://easy-mock.com/mock/5cadb508b56fc13f6206ad0e/example/json.txt")]).then(function(arr){let [res1,res2]=arrconsole.log(res1,res2)},function(){alert("至少一個失敗")})

有了promise之后的異步

Promise.all([$.ajax({]}),$.ajax({})]).then(results=>{//全部成功之后的操作},err=>{//失敗} )

Promise其他用法

• Promise.race() 競速，與all區別是：只要有一個文件請求成功了就用誰，就會返回resolve

轉載于:https://www.cnblogs.com/Renyi-Fan/p/11609018.html

總結

以上是生活随笔為你收集整理的石川es6课程---12、Promise的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。