石川es6課程---12、Promise

一、總結(jié)

一句話總結(jié)：

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

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

?

1、傳統(tǒng)的異步寫法？

嵌套操作

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

?

?

2、傳統(tǒng)的同步操作數(shù)據(jù)？

同時只能做一件事

let banner_data=ajax_sync('./banners') let hotItem_data=ajax_sync('./hotItems') let slide_data=ajax_sync('./slides')傳統(tǒng)的同步操作數(shù)據(jù)

?

?

3、jquery中ajax方法的回調(diào)函數(shù)的作用是什么？

$.ajax是不同操作的回調(diào)函數(shù)，$.post是發(fā)送成功的回調(diào)函數(shù)

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

?

?

4、Promise實例？

用Promise.all()，全部成功一個回調(diào)函數(shù)，失敗一個回調(diào)函數(shù)

Promise.all()函數(shù)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

• 異步和同步

  • 異步，操作之間沒有關(guān)系，同時執(zhí)行多個操作， 代碼復(fù)雜
  • 同步，同時只能做一件事，代碼簡單

• Promise 對象

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

• Promise 也是一個構(gòu)造函數(shù)

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

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

• Promise 使得異步流程可以寫成同步流程

// 傳統(tǒng)寫法 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數(shù)組中所有的promise實例都變?yōu)閞esolve的時候，該方法才會返回
  • 并將所有結(jié)果傳遞results數(shù)組中
  • promise數(shù)組中任何一個promise為reject的話，則整個Promise.all調(diào)用會立即終止，并返回一個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就是賽跑的意思
  • 哪個結(jié)果獲得的快，就返回那個結(jié)果
  • 不管結(jié)果本身是成功狀態(tài)還是失敗狀態(tài)

?

?

?

3、Promise

異步請求/操作

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

優(yōu)缺點

• 異步缺點：代碼更復(fù)雜
• 同步優(yōu)點：代碼簡單

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

Promise——清除異步操作

• 本質(zhì)：用同步一樣的方式寫異步
• 用法：?基本的封裝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()函數(shù)

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區(qū)別是：只要有一個文件請求成功了就用誰，就會返回resolve

轉(zhuǎn)載于:https://www.cnblogs.com/Renyi-Fan/p/11609018.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。