[toc] # AJAX ## 什么是AJAX？ AJAX 是 `異步的 JavaScript 和 XML` 的英文首字母編寫。 是一種在瀏覽器中通過 JS 代碼和后端服務器進行數據通信的技術。 ## 瀏覽器如何發送 AJAX 請求（原生AJAX如何實現）？ 瀏覽器中提供了一個 `XMLHttpRequest` 的對象，通過這個對象可以實現和服務器通信的功能。 示例代碼： ~~~ // 1. 創建 XMLHttpRequest 對象 var xhr=new XMLHttpRequest(); // 2. 設置請求方式和地址 xhr.open('GET',url,false); // 3. 設置處理返回數據的回調函數 xhr.onreadystatechange=function(){ // 3.1 根據狀態判斷是否成功 if(xhr.readyState==4){ // 3.2 根據狀態判斷執行結果 if(xhr.status==200 || xhr.status==304){ // 3.3 輸出返回的結果 console.log(xml.responseText) } } } // 4. 向后端發送請求 xml.send() ~~~ ## 如何將原生 AJAX 封裝成 Promise 對象？ 1. 創建 Promise 對象 2. 把AJAX代碼放到 Promise 對象中 3. 通過調用 resolve 返回成功之后的結果 示例代碼、 ~~~ // 創建 Promise 對象 const promise = new Promise(function(resolve, reject){ // 創建處理返回結果的回調函數 const handler = function() { if (this.readyState !== 4) { return; } if (this.status === 200) { // 如果成功就調用 resolve 設置為 fulfilled 狀態，并返回結果 resolve(this.response); } else { // 如果失敗就調用 reject 設置為 rejected 狀態，并返回錯誤信息 reject(new Error(this.statusText)); } }; // 以下為異步的原生 AJAX 代碼 const client = new XMLHttpRequest(); client.open("GET", url); // 設置上面創建的回調函數 client.onreadystatechange = handler; client.responseType = "json"; client.setRequestHeader("Accept", "application/json"); client.send(); }); ~~~ ## 為什么要使用 axios？ axios 是一個高效、精簡的已經封裝好的 AJAX 的庫，它內部使用了 ES6 中的 Promise 對 AJAX 進行封裝，讓我們可以直接使用 Promise 而無須自己再封裝。 配合 async/await 一起使用，可以以同步的方式調用后端接口。 ## axios 如何配置基地址？為什么要配置？ 因為我們調用的后端接口前面基礎部分都是相同的，配置了基地址之后，我們每次調用接口時就無須再寫前面公共的部分了。 兩種方式： - 方式一、直接配置 ~~~ // 配置基地址 axios.default.baseURL = 'http://xxx.xxx.xxx/api/v1/' // 調用接口時無須再寫基地址 axios.get('/users') // 相當于：http://xxx.xxx.xxx/api/v1/users ~~~ - 方式二、創建 axios 對象時配置 ~~~ // 創建對象時配置基地址 const http = axios.create({ baseURL: 'http://xxx.xxx.xxx/api/v1/', }); // 通過對象調用接口無須寫基地址 http.get('/users') // 相當于：http://xxx.xxx.xxx/api/v1/users ~~~ ## axios 攔截器有哪些？干什么用的？應用場景？ 攔截器分為 `請求` 和 `響應` 兩種攔截器。 - 請求攔截器：在發送`請求之前`調用。 - 響應攔截器：在服務 `返回數據之后，交給程序之前` 調用。 應用場景： 請求攔截器（發送之前）： 1. 頁面中顯示一個 loading 的進度條 2. 向發送的請求頭中添加 Token ，實現令牌的身價驗證 響應攔截器（服務器返回后）： 1. 銷毀頁面中顯示的 loading 進度條 2. 根據返回的結果做統一的處理，比如，如果請求失敗，統一提示錯誤的消息 ## 調用接口時有幾種請求方式？一般什么時候使用？ 向接口發送請求時，主要有以下五種方式： 1、GET ：當獲取數據時使用 2、POST：在添加數據時使用 3、DELETE：刪除數據時使用 4. PUT：修改整條數據時使用 5. PATCH：修改數據的一部分時使用 示例代碼、 ~~~ axios.get('/users?limit=10') // 獲取10條記錄 axios.delete('/users/10') // 刪除id=10的用戶 axios.post('/users',{name:'tom'}) // 添加一個新用戶 axios.put('/users/10',{name:'jack'}) // 修改 id=10 的用戶的 name=jack ~~~