关于 Fetch API 的注意事项

tracy 发布于2019-08-20 18:33 / 2014人阅读

摘要：输出为因此当我们发送令牌时，在服务端接收到的是，如果仍用处理，将发生错误。文件上传失败解决删除你的自定义请求头设置参见实践补充篇，文件上传怎么设置

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怎么设置

GPU云服务器云服务器 fetch-api fetch和axios的区别的注意事项注册云服务器的注意事项

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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