實例如下所示:
//1.解決異步回調(diào)問題//1.1 如何同步異步請求//如果幾個異步操作之間并沒有前后順序之分,但需要等多個異步操作都完成后才能執(zhí)行后續(xù)的任務,無法實現(xiàn)并行節(jié)約時間const fs = require('fs');let school = {};fs.readFile('./name.txt','utf8',function (err,data) { school.name = data;});fs.readFile('./age.txt','utf8',function (err,data) { school.age = data;});console.log(school);//1.2如何解決回調(diào)地獄//在需要多個操作的時候,會導致多個回調(diào)函數(shù)嵌套,導致代碼不夠直觀,就是常說的回調(diào)地獄const fs = require('fs');fs.readFile('./content.txt','utf8',function (err,data) { if(err)console.log(err); fs.readFile(data,'utf8',function (err,data) { if(err)console.log(err); console.log(data); })});//2.Promise//Promise本意是承諾,在程序中的意思就是承諾我過一段時間后會給你一個結果。 什么時候會用到過一段時間?答案是異步操作,異步是指可能比較長時間才有結果的才做,例如網(wǎng)絡請求、讀取本地文件等//3.Promise的三種狀態(tài)//例如媳婦說想買個包,這時候他就要"等待"我的回復,我可以過兩天買,如果買了表示"成功",如果我最后拒絕表示"失敗",當然我也有可能一直拖一輩子//Pending Promise對象實例創(chuàng)建時候的初始狀態(tài)//Fulfilled 可以理解為成功的狀態(tài)//Rejected 可以理解為失敗的狀態(tài)//then 方法就是用來指定Promise 對象的狀態(tài)改變時確定執(zhí)行的操作,resolve 時執(zhí)行第一個函數(shù)(onFulfilled),reject 時執(zhí)行第二個函數(shù)(onRejected)//4.構造一個Promise//4.1 promise的方法會立刻執(zhí)行l(wèi)et promise = new Promise(()=>{ console.log('hello');});console.log('world');//4.2 promise也可以代表一個未來的值const fs = require('fs');let promise = new Promise((resolve,reject)=>{ fs.readFile('./content.txt','utf8',function (err,data) { if(err)console.log(err); resolve(data); })});promise.then(data =>{ console.log(data);});//4.3 代表一個用于不會返回的值const fs = require('fs');let promise = new Promise((resolve,reject)=>{});promise.then(data =>{ console.log(data);});//4.4 應用狀態(tài)實現(xiàn)拋硬幣function flip_coin() { return new Promise((resolve,reject)=>{ setTimeout(function () { var random = Math.random(); if(random > 0.5){ resolve('正'); }else{ resolve('反'); } },2000) })}flip_coin().then(data=>{ console.log(data);},data=>{ console.log(data);});//5.實現(xiàn)簡單的Promisefunction Promise(fn) { fn((data)=>{ this.resolve(data) },(data)=>{ this.reject(data); })}Promise.prototype.resolve = function (data) { this._success(data)};Promise.prototype.reject = function (data) { this._error(data);};Promise.prototype.then = function (success,error) { this._success = success; this._error = error;};//6.Error會導致觸發(fā)Reject//可以采用then的第二個參數(shù)捕獲失敗,也可以通過catch函數(shù)進行捕獲function flip_coin() { return new Promise((resolve,reject)=>{ throw Error('沒有硬幣') })}flip_coin().then(data=>{ console.log(data);}).catch((e)=>{ console.log(e);})//7.Promise.all實現(xiàn)并行//接受一個數(shù)組,數(shù)組內(nèi)都是Promise實例,返回一個Promise實例,這個Promise實例的狀態(tài)轉(zhuǎn)移取決于參數(shù)的Promise實例的狀態(tài)變化。當參數(shù)中所有的實例都處于resolve狀態(tài)時,返回的Promise實例會變?yōu)閞esolve狀態(tài)。如果參數(shù)中任意一個實例處于reject狀態(tài),返回的Promise實例變?yōu)閞eject狀態(tài)const fs = require('fs');let p1 = new Promise((resolve,reject)=>{ fs.readFile('./name.txt','utf8',function (err,data) { resolve(data); });})let p2 = new Promise((resolve,reject)=>{ fs.redFile('./age.txt','utf8',function (err,data) { resolve(data); });})Promise.all([p1,p2]).then(([res1,res2])=>{ console.log(res1);})//不管兩個promise誰先完成,Promise.all 方法會按照數(shù)組里面的順序?qū)⒔Y果返回//8.Promise.race實現(xiàn)選擇接受一個數(shù)組,數(shù)組內(nèi)都是Promise實例,返回一個Promise實例,這個Promise實例的狀態(tài)轉(zhuǎn)移取決于參數(shù)的Promise實例的狀態(tài)變化。當參數(shù)中任何一個實例處于resolve狀態(tài)時,返回的Promise實例會變?yōu)閞esolve狀態(tài)。如果參數(shù)中任意一個實例處于reject狀態(tài),返回的Promise實例變?yōu)閞eject狀態(tài)。const fs = require('fs');let p1 = new Promise((resolve,reject)=>{ fs.readFile('./name.txt','utf8',function (err,data) { resolve(data); });})let p2 = new Promise((resolve,reject)=>{ fs.readFile('./age.txt','utf8',function (err,data) { resolve(data); });})Promise.race([p1,p2]).then(([res1,res2])=>{ console.log(res1,res2);})9.Promise.resolve//返回一個Promise實例,這個實例處于resolve狀態(tài)。Promise.resolve('成功').then(data=>{ console.log(data);})10.Promise.reject//返回一個Promise實例,這個實例處于reject狀態(tài)Promise.reject('失敗').then(data=>{ console.log(data);},re=>{ console.log(re);})//11.封裝ajaxfunction ajax({url=new Error('url必須提供'),method='GET',async=true,dataType='json'}){ return new Promise(function(resolve,reject){ var xhr = new XMLHttpRequest(); xhr.open(method,url,async); xhr.responseType = dataType; xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(/^2/d{2}/.test(xhr.status)){ resolve(xhr.response); }else{ reject(xhr.response); } } } xhr.send(); });}//12.chain中返回結果Promise.resolve([1,2,3]).then(arr=>{ return [...arr,4]}).then(arr=>{ return [...arr,5]}).then(arr=>{ console.log(arr);})//13.chain中返回promise//then中的結果是promise的resolve后的結果Promise.resolve('user').then(data=>{ return new Promise(function (resolve,reject) { fetch('/'+data).then(res=>res.json().then((json)=>{ resolve(json) })) })}).then(data=>{ console.log(data);});//改寫的更簡單些Promise.resolve('user').then(data=>{ return fetch('/'+data)}).then(res=>{ return res.json();}).then(data=>{ console.log(data);})//14.async/await//本質(zhì)是語法糖,await與async要連用,await后只能跟promiseasync function getHello() { return new Promise((resolve,reject) => { setTimeout(function () { resolve('hello'); },2000); })}async function getData () { var result = await getHello(); console.log(result);} ;getData();以上這篇基于Promise 異步編程的實例講解就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持VeVb武林網(wǎng)。
新聞熱點
疑難解答