## 一、概述 Promise 是異步編程的一種解決方案，比傳統的解決方案：回調函數和事件，更合理和更強大。它由社區最早提出和實現，ES6 將其寫進了語言標準，統一了用法，原生的提供了Promise對象。 所謂Promise，簡單說就是一個容器，里面保存著某個未來才會結束的事件（通常是一個異步操作）的結果。從語法上說，Promise 是一個對象，從它可以獲取異步操作的消息。Promise 提供統一的 API，各種異步操作都可以用同樣的方法進行處理。 Promise可以被鏈式調用：  ## 二、對象狀態 Promise對象有三個狀態： 1. pending：初始值，不是fulfilled，也不是rejected 2. fulfilled：代表操作成功 3. rejected：代表操作失敗 >[danger] 一旦狀態改變，就不會再變，任何時候都可以得到這個結果。Promise對象的狀態改變，只有兩種可能：從pending變為fulfilled和從pending變為rejected。只要這兩種情況發生，狀態就凝固了，不會再變了，會一直保持這個結果，這時就稱為 resolved（已定型）。 ## 三、基本用法 1、定義Promise實例，包含業務代碼執行，并拋出成功/失敗信號； ```javascript const promise = new Promise(function(resolve, reject) { // ... 業務操作代碼 if (/* 異步操作成功 */){ resolve(value);//業務操作最后是成功的，就要把狀態改為成功，且通過resolve把value值拋出去，傳遞給then函數里面排名第一位的參數，也就是成功邏輯處理函數，作為該函數的入口參數傳遞過去； } else { reject(error);//如果業務操作代碼中間發生異常，就要把狀態改為失敗，且把error值拋出去，傳遞給then函數里面位于排名第二位的參數，也就是失敗邏輯處理函數，作為該函數的入口參數傳遞過去； } }); ``` >[danger] > 1、Promise構造函數接受一個函數作為參數，該函數的兩個參數分別是resolve和reject。它們是兩個函數，由 JavaScript 引擎提供，不用自己部署（不用自己提供這兩個函數的實現，直接調用即可）。 > 2、resolve函數的作用是，將Promise對象的狀態從“未完成”變為“成功”（即從 pending 變為 resolved），在異步操作成功時調用，并將異步操作的結果，作為參數傳遞出去； > 3、reject函數的作用是，將Promise對象的狀態從“未完成”變為“失敗”（即從 pending 變為 rejected），在異步操作失敗時調用，并將異步操作報出的錯誤，作為參數傳遞出去。 2、根據上面實例成功/失敗信號，用then方法分別指定resolved狀態和rejected狀態的回調函數； ```javascript promise.then(function(value) { // 接收到成功信號的時候，且從實例的resolve獲取resolve里面的數據，執行的代碼定義在這里 }, function(error) { // 接收到失敗信號的時候，且從實例的reject獲取reject里面的數據，執行的代碼定義在這里 }); ``` then方法可以接受兩個回調函數作為參數。第一個回調函數是Promise對象的狀態變為resolved時調用，第二個回調函數是Promise對象的狀態變為rejected時調用。其中，第二個函數是可選的，不一定要提供。這兩個函數都接受Promise對象傳出的值（第1步里面的resolve/reject傳出來的）作為參數。 ## 四、實例 1、簡單的實例 ``` //1、定義實例 let promise = new Promise(function(resolve, reject) { console.log('Promise'); //業務代碼腳本 resolve(); //未帶值 }); // 2、設定回調函數 promise.then(function() { //這里也就沒有入參 console.log('resolved.'); }); console.log('Hi!'); ``` ``` // Promise // Hi! // resolved 上面代碼中，Promise 新建后立即執行，所以首先輸出的是Promise。然后，then方法指定的回調函數，將在當前腳本所有業務代碼執行完才會執行，所以resolved最后輸出。 ``` 2、較復雜的實例 ``` const getJSON = function(url) { const promise = new Promise(function(resolve, reject){ const handler = function() { if (this.readyState !== 4) { return; } if (this.status === 200) { resolve(this.response); } else { reject(new Error(this.statusText)); } }; const client = new XMLHttpRequest(); client.open("GET", url); client.onreadystatechange = handler; client.responseType = "json"; client.setRequestHeader("Accept", "application/json"); client.send(); }); return promise; }; getJSON("/posts.json").then(function(json) { console.log('Contents: ' + json); }, function(error) { console.error('出錯了', error); }); ```