Promise替代Ajax？

簡介

ECMAscript 6 原生提供了 Promise 對象。
Promise 對象表明了將來將要發生（異步操做）的事件，用來傳遞異步操做的消息。
Promise 很是重要，是當今前端面試過程當中基本上必考的問題。

Promise 優缺點

有了 Promise 對象，就能夠將異步操做以同步操做的流程表達出來，避免了層層嵌套的回調函數。此外，Promise 對象提供統一的接口，使得控制異步操做更加容易。

Promise 也有一些缺點。首先，沒法取消 Promise，一旦新建它就會當即執行，沒法中途取消。其次，若是不設置回調函數，Promise 內部拋出的錯誤，不會反應到外部。第三，當處於 Pending 狀態時，沒法得知目前進展到哪個階段（剛剛開始仍是即將完成）。

回調地獄

什麼是回調地獄：在回調函數中調用回調函數...

需求：經過ajax獲取用戶id，再經過id獲取name,再經過name獲取用戶email

$.ajax({
    type: "GET",
    url: "data1.json",
    success: function(res1){
         let {id} = res; //對象解構
         $.ajax({
            type: "GET",
            url: "data2.json",
            data: {id}, //對象簡寫，至關於 {id: id}
            success: function(res2){
                let {username} = res2;
                $.ajax({
                  type: "GET",
                  url: "data3.json",
                  data: {username},
                  success: function(res){
                      console.log(res.email)
                  }
                })
            }
         }) 
    }
  })
複製代碼

Promnis解決了回調地獄。

promise 基礎用法

promise 對象是一個構造函數，能夠使用 new 來調用 Promise 的構造器來進行實例化。

var promise = new Promise(function(resolve, reject) {});
複製代碼

• promise 接受一個函數做爲參數。
• 在函數中接受兩個參數：
  • resolve
  • reject
• promise 實例有兩個屬性：
  • state：狀態
  • result：結果

promise 狀態

一、Promise 有三種狀態：

1. pending: 初始狀態（準備、待解決、進行中），不是成功或失敗狀態。
   
2. fulfilled: 已完成、成功。
   
3. rejected: 已完成、失敗。
   

只有異步操做的結果，能夠決定當前是哪種狀態，任何其餘操做都沒法改變這個狀態。

二、 Promise 對象的狀態改變，只有兩種可能：

• 從 pending 變爲 rejected
• 從 pending 變爲 rejected

示例：

const p = new Promise((resolve, reject) => {
  //resolve();調用函數，使當前的promise對象的狀態改爲fulfilled
  resolve();
})
console.dir(p)//fulfilled
複製代碼

const p = new Promise((resolve, reject) => {
  //reject();調用函數，使當前的promise對象的狀態改爲rejected
  reject();
})
console.dir(p)//rejected
複製代碼

//一次性
const p = new Promise((resolve, reject) => {
  reject();
  resolve();//不會更改當前promise狀態
})
console.dir(p)//rejected
複製代碼

狀態改變是一次性的
一旦狀態改變，就不會再變，任什麼時候候均可以獲得這個結果。只要這兩種狀況發生，狀態就凝固了，不會再變了，會一直保持這個結果。就算改變已經發生了，你再對 Promise 對象添加回調函數，也會當即獲得這個結果。這與事件（Event）徹底不一樣，事件的特色是，若是你錯過了它，再去監聽，是得不到結果的。

promise 結果

示例：

const p = new promise((resolve, reject) => {
	//調用resolve(), reject() 傳參，改變當前 promise 的結果
    //resolve('成功的結果');
    reject('失敗的結果')
})
複製代碼