JavaScript進階之Ajax的問題和什麼是promise

前端接口調用的幾種方式 ，有原生ajax ，基於jQuery的ajax ，fetch ，axios ，原生ajax的原理和基本使用我們已經介紹過了 ，下面來看看基於jQuery的ajax的運用以及Ajax的問題

基於jQuery的Ajax

jQuery為我們提供了更強大的更進一步的原生Ajax封裝

它的用法：通過jQuery.ajax([settings])（ $.ajax({}) ）來配置方式發起Ajax請求

jQuery為我們提供Ajax方法

url ：接口地址 ，後臺給我們提供的接口地址

函數：如果接口調用成功會有成功的回調success函數裡面可寫成功調取到接口後的業務邏輯 ，以及請求發生錯誤時的error函數 ，以及其他函數beforeSend（在發送請求之前調用）、dataFilter（在請求成功之後調用）、complete（當請求完成之後調用這個函數，無論成功或失敗）

其他常用可選參數：

type：請求方式 ("POST" 或 "GET")

注意：其它 HTTP 請求方法，如 PUT 和 DELETE 也可以使用，但僅部分瀏覽器支持。

async：默認值： true。默認設置下，所有請求均為異步請求。如果需要發送同步請求，請將此選項設置為 false。

注意，同步請求將鎖住瀏覽器，用戶其它操作必須等待請求完成才可以執行。

data ：發送到伺服器的數據。將自動轉換為請求字符串格式。也就是我們給後臺傳遞的參數等

dataType：設置伺服器返回的參數類型 ，一般都是「json」

常用參數配置（其他參數可查文檔）

Ajax的問題

Ajax異步操作是通過純粹的回調函數的形式進行處理，難以讀懂，維護困難，稍有不慎就會踏入回調地獄 - 嵌套層次深，不好維護

如果層層回調地獄裡面寫滿邏輯

promise

ES6 原生提供了 Promise 對象 ，所謂 Promise，就是一個對象，用來傳遞異步操作的消息。可以將異步操作隊列化，按照期望的順序執行，返回符合預期的結果，可以在對象之間傳遞和操作promise，幫助我們處理隊列

有了 Promise 對象，就可以將異步操作以同步操作的流程表達出來，避免了層層嵌套的回調函數。

promise 還提供了簡潔的API 使得異步操作更加容易 ，下面來構建promise 操作

1.我們使用new來構建一個Promise Promise的構造函數接收一個參數，是函數，並且傳入兩個參數： resolve，reject， 分別表示異步操作執行成功後的回調函數和異步操作執行失敗後的回調函數

new來構建一個Promise

resolve作用是，將Promise對象的狀態從「未完成」變為「成功」（即從 pending 變為 resolved），在異步操作成功時調用，並將異步操作的結果，作為參數傳遞出去；（pending[待定]初始狀態）

reject作用是，將Promise對象的狀態從「未完成」變為「失敗」（即從 pending 變為 rejected），在異步操作失敗時調用，並將異步操作報出的錯誤，作為參數傳遞出去。

2.Promise實例生成以後，可以用then方法指定resolved狀態和reject狀態的回調函數 在then方法中，你也可以直接return數據而不是Promise對象，在後面就可以接收到數據了

then方法

基於Promise發送Ajax請求

1.基於Promise封裝原生Ajax

Promise簡單封裝原生Ajax

2.通過在then方法中，直接return數據解決回調地獄

解決回調地獄代碼更清晰易維護

Promise常用API

.then()：得到異步任務正確的結果

.catch() ：獲取異常信息

.finally()：成功與否都會執行

Promise常用實例方法

Promise.all()： 所有的完成 （方法接受一個數組作參數，數組中的對象（p1、p2、p3）均為promise實例（如果不是一個promise，該項會被用Promise.resolve轉換為一個promise)。它的狀態由這三個promise實例決定）

Promise.race()：競速，完成一個即可（同樣接受一個數組作參數。當p1, p2, p3中有一個實例的狀態發生改變（變為fulfilled或rejected），p的狀態就跟著改變。並把第一個改變狀態的promise的返回值，傳給p的回調函數 ）

Promise對象方法

Promise.all拿到p1 p2 p3數據