關于 Fetch API 的注意事項

tracy 發布于2019-08-20 18:33 / 2020人閱讀

摘要：輸出為因此當我們發送令牌時，在服務端接收到的是，如果仍用處理，將發生錯誤。文件上傳失敗解決刪除你的自定義請求頭設置參見實踐補充篇，文件上傳怎么設置

fetch(url, {
    // "GET", "POST", "PUT", "DELETE"等
    method: "GET", 
})

關于 GET 參數

發送GET請求時的query參數不能放到對象中（如：{a:1, b:2}）必須在 url 字符串中：

const url = "http://api.example.com/search?a=1&b=2"

可通過如下函數處理url：

function makeURL(url, params = {}) {
    let _URL = new URL(url, window.location.origin);
    Object.keys(params).forEach(key => _URL.searchParams.append(key, params[key]));
    return _URL
}
const url = makeURL("http://api.example.com/search",{
    a: 1,
    b: 2,
})

然后發起請求：

fetch(url, {
    method: "GET"
})

關于 POST 請求體 body

如需通過POST請求的發送json，需要做字符串化處理：

fetch(url, {
    method: "POST",
    headers: {
        "Content-Type": "application/json",
    }
    body: JSON.stringify({a: 1, b: 2})
})

關于 cookies

Fetch 發送請求默認不攜帶 cookies，如需攜帶，需要添加credentials: "include" 參數：

fetch(url,{
    method: "GET", // "POST"等
    credentials: "include",
})

關于 Headers

定義headers：

const headers = {
    "Content-Type": "application/x-www-form-urlencoded"
    "Authorization": "Token uynn887989afs989s8df9afa08&^&huh"
}

或

const headers = new Headers({
    "Content-Type": "application/x-www-form-urlencoded"
    "Authorization": "Token uynn887989afs989s8df9afa08&^&huh"
})

發送請求：

fetch(url, {
  method: "POST",
  headers: headers,
}

自定義的 headers中的鍵會經過 Headers 對象包裝，會自動轉換為小寫。

// Create a test Headers object
var myHeaders = new Headers();
myHeaders.append("Content-Type", "text/xml");
myHeaders.append("Vary", "Accept-Language");

// Display the key/value pairs
for (var [key,value] of myHeaders.entries()) {
    console.log(`${key}: ${value}`);
}

輸出為：

content-type: text/xml
VM141:8 vary: Accept-Language

因此當我們發送 Authorization 令牌時，在服務端接收到的是 authorization，如果仍用 Authorization 處理，將發生錯誤。

文件上傳失敗解決

刪除你的自定義Content-Type請求頭設置

參見：fetch實（cai）踐（keng）補充篇，文件上傳Content-type multipart/form-data怎么設置

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/84681.html

Fetch API

摘要：遍歷所有的字段，接受一個回調函數，和可選的第二個參數。構造函數接受的參數和函數的參數形式一樣，實際上方法會使用傳入的參數構造出一個對象來。 Fetch API Fetch API 旨在用來簡化 HTTP 請求，它包含以下類和方法： fetch 方法：用于發起 HTTP 請求 Request 類：用來描述請求 Response 類：用來表示響應 Headers 類：用來表示 HTTP ...

AJie 2019-08-21 10:55 評論0 收藏0
ES6 Fetch API HTTP請求實用指南

摘要：例子張三刪除用戶為了刪除用戶，我們首先需要定位用戶，然后我們定義方法類型。例子張三結論現在，你已基本了解如何使用的從服務器檢索或操作資源，以及如何處理。您可以使用本文作為如何構建操作的請求的指南。 showImg(https://segmentfault.com/img/bVbjxqh?w=1000&h=562); 本次將介紹如何使用Fetch API（ES6 +）對REST API的...

Sunxb 2019-08-23 13:12 評論0 收藏0
分別使用 XHR、jQuery 和 Fetch 實現 AJAX

摘要：本文詳細講述如何使用原生和來實現。使用可以無刷新地向服務端發送請求接收服務端響應，并更新頁面。分別要用到的方法和方法。，，都是現在和未來解決異步的標準做法，可以完美搭配使用。這也是使用標準一大好處。本文詳細講述如何使用原生 JS、jQuery 和 Fetch 來實現 AJAX。 AJAX 即 Asynchronous JavaScript and XML，異步的 JavaScript...

Julylovin 2019-08-21 11:24 評論0 收藏0
異步請求與Fetch

摘要：再談異步請求語言將任務的執行模式分成兩種同步和異步。通過對象及時監聽完成事件，執行事件回調函數不會堵塞程序運行。新的是異步請求的另一種方案，比起其復雜糅雜的寫法，能更簡潔的獲取到數據。提供了對和以及其他與網絡請求有關的對象的通用定義。再談異步請求 Javascript語言將任務的執行模式分成兩種：同步（Synchronous）和異步（Asynchronous）。在瀏覽器，耗時很長...

vibiu 2019-08-20 17:49 評論0 收藏0
Chrome 66 Beta：CSS 類型對象模型，異步剪貼板 API，AudioWorklet，等

摘要：在中，針對屬性的一個子集實現了類型對象模型，這些屬于的一部分。返回一個對象，該對象指定每個受限制屬性的值或值范圍。例如，這會在導航請求期間發生。按照規范，已被刪除。原文鏈接：Chrome 66 Beta: CSS Typed Object Model, Async Clipboard API, AudioWorklet 除非另有說明，否則下文所述的更改適用于 Android，Ch...

ralap 2019-08-22 15:49 評論0 收藏0