226.課件14&14-基于PROMISE解決回調地獄問題 · 原生js-2018

~~~ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>珠峰培訓</title> </head> <body> <script src="node_modules/jquery/dist/jquery.min.js"></script> <script> //=>回調地獄 /*$.ajax({ url: 'https://www.easy-mock.com/mock/5b0412beda8a195fb0978627/temp/list', success: result => { $.ajax({ url: 'https://www.easy-mock.com/mock/5b0412beda8a195fb0978627/temp/info', success: result => { $.ajax({ url: 'https://www.easy-mock.com/mock/5b0412beda8a195fb0978627/temp/add', method:'POST', success: result => { } }); } }); } });*/ //=>發布訂閱 /*let $plan = $.Callbacks(), $planB = $.Callbacks(); $.ajax({ url: 'https://www.easy-mock.com/mock/5b0412beda8a195fb0978627/temp/list', success: result => { $plan.fire(result); } }); $plan.add(result => { $.ajax({ url: 'https://www.easy-mock.com/mock/5b0412beda8a195fb0978627/temp/list', success: result => { $planB.fire(result); } }); }); $planB.add(result => { });*/ //=>Promise /* let queryA = function queryA() { return new Promise(resolve => { $.ajax({ url: 'https://www.easy-mock.com/mock/5b0412beda8a195fb0978627/temp/list', success: resolve }); }); }; let queryB = function queryB() { return new Promise(resolve => { $.ajax({ url: 'https://www.easy-mock.com/mock/5b0412beda8a195fb0978627/temp/info', success: resolve }); }); }; let queryC = function queryC() { return new Promise(resolve => { $.ajax({ url: 'https://www.easy-mock.com/mock/5b0412beda8a195fb0978627/temp/add', method: 'POST', success: resolve }); }); }; let promise = queryA(); promise.then(result => { console.log('A', result); return queryB();//=>上一個THEN中函數手動返回一個新的PROMISE實例(管控了一個異步操作)，下一個THEN會等上一個THEN中的異步成功后在執行 }).then(result => { console.log('B', result); return queryC(); }).then(result => { console.log('C', result); });*/ </script> <script src="js/promise.js"></script> </body> </html> ~~~ ~~~ /* * Promise是ES6中新增加的內置類：目的是為了管理異步操作的 * 1.new Promise() 創建類的一個實例，每一個實例都可以管理一個異步操作 * ->必須傳遞一個回調函數進去（回調函數中管理你的異步操作）,不傳遞會報錯 * ->回調函數中會有兩個參數 * resolve：異步操作成功做的事情（代指成功后的事件隊列 =>成功后要做的所有的事情都存放到成功這個事件隊列中） * reject：異步操作失敗做的事情（代指失敗后的事件隊列） * ->new Promise的時候立即把回調函數執行了（Promise是同步的） * * 2.基于Promise.prototype.then方法（還有catch/finally兩個方法）向成功隊列和失敗隊列中依次加入需要處理的事情 * * 3.如果是多個THEN掉用，不是像我們想象的依次把增加的方法執行 * 異步操作成功或者失敗，先把第一個THEN中的方法執行，每當執行一個THEN會返回一個新的Promise實例，這個實例管控的是第一個THEN中方法執行的是成功還是失敗 * */ /*let promise1 = new Promise((resolve, reject) => { $.ajax({ url: 'json/data2.json', success(result) { resolve(result); }, error(msg) { reject('no'); } }); }); promise1.then( result => { console.log('THEN1 OK', result); return 100; }, msg => { console.log('THEN1 NO', msg); return 100; } ).then( result => { console.log('THEN2 OK', result); }, msg => { console.log('THEN2 NO', msg); } );*/ //=>建議不要使用THEN中的第二個參數（這樣看起來很亂），而是建議我們使用Promise.prototype.catch來管理失敗的情況 /*let promise1 = new Promise((resolve, reject) => { $.ajax({ url: 'json/data2.json', success(result) { resolve(result); }, error(msg) { reject('no'); } }); }); promise1.then(result => { console.log('THEN1 OK', result); 100(); return 100; }).catch(msg => { //=>第一個CATCH //1.異步請求失敗會執行它 //2.第一個THEN方法失敗也會執行它 console.log('CATCH1', msg); }).then(result => { console.log('THEN2 OK', result); }).catch(msg => { console.log('CATCH2', msg); });*/ //=>JS中的異常捕獲（目的：把拋出異常的錯誤捕獲到，不讓其阻斷瀏覽器的繼續執行） /* try { //=>正常執行的JS代碼(可能會報錯) 1(); } catch (e) { //=>TRY中的代碼報錯了會執行CATCH console.log(e.message); } finally { //=>不管TRY中的代碼成功還是失敗都會執行 } */ let A = function A() { return new Promise(resolve => { setTimeout(() => { resolve(); }, 1000); }); }; let B = function B() { return new Promise(resolve => { setTimeout(() => { resolve(); }, 1000); }); }; let promise = A(); promise.then(() => { console.log(1); return B();//=>如果方法中返回的一個具體值，而且執行中沒有錯誤異常，會立即執行下一個THEN中的方法（不寫RETURN也是返回的了具體值：undefined），但是如果返回的是一個PROMISR實例（并且管控了一個異步操作），只能等PROMISE完成，把成功后的結果當做具體的值返回，才能進入下一個函數執行 }).then(() => { console.log(2); }); ~~~ ![](https://img.kancloud.cn/d7/e2/d7e2137e1cac8774d9106277788488b0_559x271.png)