使用Promise來封裝ajax請求
阿新 • • 發佈：2020-08-09
需要引入的js檔案：此處命名為ajax.js
function request(url) { return new Promise((resolve, reject) => { let xhr = new XMLHttpRequest(); xhr.open('get', url); xhr.send(); xhr.onload = function() { if (this.status == 200) resolve(JSON.parse(this.responseText));else reject('請求失敗'); }; xhr.onerror = function() { reject(this); } }) }
獲取資料的頁面：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <script src="./ajax.js"></script> 9 </head> 10 11 <body> 12 13 </body> 14 <script> 15 let url = 'https://result.eolinker.com/9ADUI9L779d8c4e34cc40db1d6a5d9bd9284d85d7dd8b14?uri=getTest'; 16 request(url) 17 .then(result=> { 18 console.log(result); 19 //可以對獲取的資料進行處理，然後再發送ajax請求 --根據邏輯來進行層次處理 --利用return來實現 20 return request(url); 21 }, null) 22 .then(result => { 23 console.log(result); 24 }) 25 </script> 26 27 </html>
//執行結果