~~~ /* * Promise：它是ES6中新增加的類 (new Promise)，目的是為了管理JS中的異步編程的，所以我們也把它稱為“Promise設計模式” */ // let p = new Promise(); // p.then(); //=>三個狀態：pending(準備:初始化成功，開始執行異步的任務)\fulfilled(成功)\rejected(失敗) // new Promise(() => { // //=>執行一個異步的任務（new Promise的時候，創建Promise的一個實例，立即會把當前函數體中的異步操作執行） =>“Promise是同步的，它可以管理異步操作” // setTimeout(() => { // // }, 1000); // console.log(1);//=>先輸出1 // }).then(); // console.log(2);//=>再輸出2 // new Promise((resolve, reject) => { // //=>resolve：當異步操作執行成功，我們執行resolve方法 // //=>reject：當異步操作執行失敗，我們執行reject方法 // setTimeout(() => { // resolve(100); // }, 1000); // }).then((res) => { // //=>第一個傳遞的函數是resolve // console.log('ok', res); // }, () => { // //=>第二個傳遞的函數是reject // console.log('no'); // }); // let val = null; // let xhr = new XMLHttpRequest(); // xhr.open('get', 'js/1.js', true); // xhr.onreadystatechange = () => { // if (xhr.readyState === 4 && xhr.status === 200) { // val = xhr.responseText; // //=>此處是獲取結果,獲取結果后還要做很多的事情（此時我們只能把數數綁定等任務寫在這里） // } // }; // xhr.send(null); // console.log(val);//=>如果使用異步AJAX請求，不等AJAX徹底完成，就把VAL輸出，此時的結果是NULL let pro = new Promise((resolve, reject) => { //=>執行一個異步操作 let xhr = new XMLHttpRequest(); xhr.open('get', 'js/1.js', true); xhr.onreadystatechange = () => { if (xhr.readyState === 4 && xhr.status === 200) { val = xhr.responseText; resolve(val); } if (xhr.status !== 200) { //=>失敗 reject(); } }; xhr.send(null); }); pro.then((res) => { console.log(res); //=>數據綁定 return 100;//=>它返回的結果傳遞給第二個THEN了... }, () => { console.log('no'); }).then((res) => { //=>當第一個THEN中的函數執行完，會執行第二個 console.log(res); }, () => { }).then(() => { //=>當第二個THEN中的函數執行完，會執行第三個 }, () => { }); ~~~