基於Promise規範的fetch API的使用

fetch的使用

1. 作用：fetch 這個API，是專門用來發起Ajax請求的；

2. fetch 是由原生 JS 提供的 API ，專門用來取代 XHR 這個對象的；

   fetch(‘請求的url地址‘).then(response => res.json()).then(data= > console.log(data))
   // 註意： 第一個.then 中獲取到的不是最終的數據，而是一個中間的數據流對象；
   // 註意： 第一個 .then 中獲取到的數據，是 一個 Response 類型的對象；
   // 第二個 .then 中，獲取到的才是真正的 數據；
    
   

3. 發起 Get 請求：

   // 默認 fetch(‘url‘) 的話，發起的是 Get 請求
     fetch(‘http://39.106.32.91:3000/api/getlunbo‘)
       .then(response => {
         // 這個 response 就是 服務器返回的可讀數據流，內部存儲的是二進制數據；
         // .json() 的作用，就是 讀取 response 這個二進制數據流，並把 讀取到的數據，轉為 JSON 格式的 Promise對象
         return response.json()
       })
       .then(data => {
         // 這裏，第二個.then 中，拿到的 data，就是最終的數據
         console.log(data)
       })
    
   

   ?

4. 發起 Post 請求：

   // 這是 查詢參數   name=zs&age=20
     var sendData = new URLSearchParams()
     sendData.append(‘name‘, ‘ls‘)
     sendData.append(‘age‘, 30)
   
     fetch(‘http://39.106.32.91:3000/api/post‘, {
       method: ‘POST‘,
       body: sendData // 要發送給服務器的數據
     })
       .then(response => response.json())
       .then(data => console.log(data))
    
   

5. 註意： fetch 無法 發起 JSONP 請求

fetch-jsonp的使用

1. fetch-jsonp最基本的用法：

   fetchJsonp(‘https://api.douban.com/v2/movie/in_theaters‘)
     .then(function (response) {
       // response.json()   當我們為 response 對象調用了它的 .json() 方法以後，返回的是新的 promise 實例對象
       return response.json()
     })
     .then(function (result) {
       console.log(result)
     })

2. 註意事項：

   1. 在調用 fetchJsonp 的時候，小括號中寫的就是 你請求的 API 地址
   2. 當調用 fetchJsonp 以後，得到的是一個 Promise 實例對象，需要為 這個 Promise 實例對象，通過.then指定成功的回調函數，在第一個 .then()中無法拿到最終的數據，拿到的是一個 Response 類型的對象；
   3. 在 第一個 .then中，需要return response.json()從而返回一個新的Promise 實例；
   4. 為 第一個 .then()中返回的promise實例，再次通過.then指定成功回調，拿到的才是最終的數據；

   總結: 第一個.then拿到的是中間數據; 第二個.then中拿到的才是最終的數據;

基於Promise規範的fetch API的使用