Promise是ES6引入的異步編程的新解決方案。語法上Promise是一個構造函數,用來封裝異步操作并可以獲取其成功或失敗的結果。 1) Promise構造函數: Promise (excutor) {} 2) Promise.prototype.then方法: 執行resolve()方法時執行此函數 3) Promise.prototype.catch方法 語法： **Promise (callback).then(SuccessCallback，errorCallback).catch(errorCallback)** ``` const p=new Promise(function(resolve, reject){ let data="有效數據" let err="數據錯誤"; if(data=="有效數據"){ resolve(data); }else{ reject(err); } }) p.then(function(value){ console.log(value); }, function(reason){ console.err(reason); }) ``` 示例：node讀取文件按 ``` const fs=require("fs"); fs.readFile("./xxx.txt",(err,data)=>{ if(err) throw err; cosole.log(data.toString()); }) //使用Promise封裝 const p=new Promise(function(resolve,reject){ fs.readFile("./xxx.txt",(err,data)=>{ if(err) reject(err); resolve(data); }) }) p.then(function(value){ cosole.log(value.toString()); }, function(reason){ console.log("讀取失敗！") }) ``` Promise封裝ajax ``` const p=new Promise(function(resolve,reject){ var xhr=new XMLHttpRequest(); xhr.open("GET","https://api.apiopen.top/getJoke"); xhr.send(); //綁定事件，處理響應結果 xhr.onreadystatechange=function(){ if(xhr.readyState==4){ if(xhr.status>=200 && xhr.status<300){ //console.log(xhr.response); resolve(xhr.response); }else{ reject(xhr.status); } } } }); p.then(function(value){ console.log(value); },function(reason){ console.error(reason); }) ``` then()的返回值是Promise對象，所以可以鏈式調用！ ``` const p =new Promise(function(resolve, reject){ setTimeout(function(){ resolve("數據"); },1000) }) //then()返回的是Promise對象.這個對象的狀態由回調函數執行結果決定 //如果回調函數返回的是非promise類型的屬性,狀態成功,返回值為對象的成功的值 //返回Promise對象時，返回的Promise對象決定對象狀態值 var res=p.then(function(value){ console.log(value); }) console.log(res); //[[PromiseStatus]]:"resolved" //[[PromiseValue]]:undefined var res=p.then(function(value){ console.log(value); return 123; }) console.log(res); //[[PromiseStatus]]:"resolved" //[[PromiseValue]]:123 var res=p.then(function(value){ console.log(value); return new Promise(function(resolve,reject){ resolve("ok"); }) }, function(reason){ console.err(reason); }) console.log(res); //[[PromiseStatus]]:"resolved" //[[PromiseValue]]:ok var res=p.then(function(value){ console.log(value); return new Promise(function(resolve,reject){ reject("error"); }) }, function(reason){ console.err(reason); }) console.log(res); //[[PromiseStatus]]:"rejected" //[[PromiseValue]]:"error" var res=p.then(function(value){ console.log(value); //throw new Error("error"); throw "error"; }, function(reason){ console.err(reason); }) console.log(res); //[[PromiseStatus]]:"rejected" //throw new Error("error");對應[[PromiseValue]]:"Error: error at http://127.0.0.1:8848/javascript/demo.html:73:8 at <anonymous>" //throw "error";對應[[PromiseValue]]:"error" ``` catch() ``` const p =new Promise(function(resolve, reject){ setTimeout(function(){ reject("error"); },1000) }) //then接受錯誤 p.then(function(resolve,reject){ },function(reason){ console.warn(reason) }) //catch接受錯誤（更簡潔） p.catch(function(reason){ console.warn(reason) }) ```