使用 Fetch

fetch() 接受第二个可选参数，一个可以控制不同配置的 init 对象：

// Example POST method implementation:
async function postData(url = '', data = {}) {
  // Default options are marked with *
  const response = await fetch(url, {
    method: 'POST', // *GET, POST, PUT, DELETE, etc.
    mode: 'cors', // no-cors, *cors, same-origin
    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
    credentials: 'same-origin', // include, *same-origin, omit
    headers: {
      'Content-Type': 'application/json'
      // 'Content-Type': 'application/x-www-form-urlencoded',
    redirect: 'follow', // manual, *follow, error
    referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
    body: JSON.stringify(data) // body data type must match "Content-Type" header
  });
  return response.




    
json(); // parses JSON response into native JavaScript objects
postData('https://example.com/answer', { answer: 42 })
  .then(data => {
    console.log(data); // JSON data parsed by `data.json()` call
  });
注意：mode: "no-cors" 仅允许使用一组有限的 HTTP 请求头：
  
Accept
  
Accept-Language
  
Content-Language
  
Content-Type 允许使用的值为：application/x-www-form-urlencoded、multipart/form-data 或 text/plain

为了让浏览器发送包含凭据的请求（即使是跨域源），要将 credentials: 'include' 添加到传递给 fetch() 方法的 init 对象。

fetch('https://example.com', {
  credentials: 'include'
});
  
备注： 当请求使用 credentials: 'include' 时，响应的 Access-Control-Allow-Origin 不能使用通配符 "*"。在这种情况下，Access-Control-Allow-Origin 必须是当前请求的源，在使用 CORS Unblock 插件的情况下请求仍会失败。
  
备注： 无论怎么设置，浏览器都不应在 预检请求 中发送凭据。了解更多：跨域资源共享 > 附带身份凭证的请求
如果你只想在请求 URL 与调用脚本位于同一起源处时发送凭据，请添加 credentials: 'same-origin'。
// The calling script is on the origin 'https://example.com'
fetch('https://example.com', {
  credentials: 'same-origin'
});
要改为确保浏览器不在请求中包含凭据，请使用 credentials: 'omit'。
fetch('https://example.com', {
  credentials: 'omit'

使用 fetch() POST JSON 数据

const data = { username: 'example' };
fetch('https://example.com/profile', {
  method: 'POST', // or 'PUT'
  headers: {
    'Content-Type': 'application/json',
  body: JSON.stringify(data),
.then(response => response.json())
.then(data => {
  console.log('Success:', data);
.catch((error) => {
  console.error('Error:', error);
});

可以通过 HTML <input type="file" /> 元素， FormData() 和 fetch() 上传文件。

const formData = new FormData();
const fileField = document.querySelector('input[type="file"]');
formData.append('username', 'abc123');
formData.append('avatar', fileField.files[0]);
fetch('https://example.com/profile/avatar', {
  method: 'PUT',
  body: formData
.then(response => response.json())
.then(result => {
  console.log('Success:', result);
.catch(error => {
  console.error('Error:', error);
});

可以通过 HTML <input type="file" multiple /> 元素， FormData() 和 fetch() 上传文件。

const formData = new FormData();
const photos = document.querySelector('input[type="file"][multiple]');
formData.append('title', 'My Vegas Vacation');
for (let i = 0; i < photos.files.length; i++) {
  formData.append(`photos_${i}`, photos.files[i]);
fetch('https://example.com/posts', {
  method: 'POST',
  body: formData,
.then(response => response.json())
.then(result => {
  console.log




    
('Success:', result);
.catch(error => {
  console.error('Error:', error);
});

从响应中读取的分块不是按行分割的，并且是 Uint8Array 数组类型（不是字符串类型）。如果你想通过 fetch() 获取一个文本文件并逐行处理它，那需要自行处理这些复杂情况。以下示例展示了一种创建行迭代器来处理的方法（简单起见，假设文本是 UTF-8 编码的，且不处理 fetch() 的错误）。

async function* makeTextFileLineIterator(fileURL) {
  const utf8Decoder = new TextDecoder('utf-8');
  const response = await fetch(fileURL);
  const reader = response.body.getReader();
  let { value: chunk, done: readerDone } = await reader.read();
  chunk = chunk ? utf8Decoder.decode(chunk) : '';
  const re = /\n|\r|\r\n/gm;
  let startIndex = 0;
  let result;
  for (;;) {
    let result = re.exec(chunk);
    if (!result) {
      if (readerDone) {
        break;
      let remainder = chunk.substr(startIndex);
      ({ value: chunk, done: readerDone } = await reader.read());
      chunk = remainder + (chunk ? utf8Decoder.decode(chunk) : '');
      startIndex = re.lastIndex = 0;
      continue;
    yield chunk.substring(startIndex, result.index);
    startIndex = re.lastIndex;
  if (startIndex < chunk.length) {
    // last line didn't end in a newline char
    yield chunk.substr(startIndex);
async function run() {
  for await (let line of makeTextFileLineIterator(urlOfFile)) {
    processLine(line);
run();

如果遇到网络故障或服务端的 CORS 配置错误时， fetch() promise 将会 reject，带上一个 TypeError 对象。虽然这个情况经常是遇到了权限问题或类似问题——比如 404 不是一个网络故障。想要精确的判断 fetch() 是否成功，需要包含 promise resolved 的情况，此时再判断 Response.ok 是否为 true。类似以下代码：

fetch('flowers.jpg')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not OK');
    return response.blob();
  .then(myBlob => {
    myImage.src = URL.createObjectURL(myBlob);
  .catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
  });

除了传给 fetch() 一个资源的地址，你还可以通过使用 Request() 构造函数来创建一个 request 对象，然后再作为参数传给 fetch() ：

const myHeaders = new Headers();
const myRequest = new Request('flowers.jpg', {
  method: 'GET',
  headers: myHeaders,
  mode: 'cors',
  cache: 'default',
});
fetch(myRequest)
  .then(response => response.blob())
  .then(myBlob => {
    myImage.src = URL.createObjectURL(myBlob);
  });
Request() 和 fetch() 接受同样的参数。你甚至可以传入一个已存在的 request 对象来创造一个拷贝：
const anotherRequest = new Request




    
(myRequest, myInit);
这个很有用，因为 request 和 response bodies 只能被使用一次（译者注：这里的意思是因为设计成了 stream 的方式，所以它们只能被读取一次）。创建一个拷贝就可以再次使用 request/response 了，当然也可以使用不同的 init 参数。创建拷贝必须在读取 body 之前进行，而且读取拷贝的 body 也会将原始请求的 body 标记为已读。
  
备注： clone() 方法也可以用于创建一个拷贝。它和上述方法一样，如果 request 或 response 的 body 已经被读取过，那么将执行失败。区别在于， clone() 出的 body 被读取不会导致原 body 被标记为已读取。

使用 Headers 的接口，你可以通过 Headers() 构造函数来创建一个你自己的 headers 对象。一个 headers 对象是一个简单的多键值对：

const content = 'Hello World';
const myHeaders = new Headers();
myHeaders.append('Content-Type', 'text/plain');
myHeaders.append('Content-Length', content.length.toString());
myHeaders.append('X-Custom-Header', 'ProcessThisImmediately');
也可以传入一个多维数组或者对象字面量：
const myHeaders = new Headers({
  'Content-Type': 'text/plain',
  'Content-Length': content.length.toString(),
  'X-Custom-Header': 'ProcessThisImmediately'
});
它的内容可以被获取：
console.log(myHeaders.has('Content-Type')); // true
console.log(myHeaders.has('Set-Cookie')); // false
myHeaders.set('Content-Type', 'text/html');
myHeaders.append('X-Custom-Header', 'AnotherValue');
console.log(myHeaders.get('Content-Length')); // 11
console.log(myHeaders.get('X-Custom-Header')); // ['ProcessThisImmediately', 'AnotherValue']
myHeaders.delete('X-Custom-Header');
console.log(myHeaders.get('X-Custom-Header')); // null
虽然一些操作只能在 ServiceWorkers 中使用，但是它提供了更方便的操作 Headers 的 API。
如果使用了一个不合法的 HTTP Header 属性名，那么 Headers 的方法通常都抛出 TypeError 异常。如果不小心写入了一个不可写的属性（见下方），也会抛出一个 TypeError 异常。除此以外的情况，失败了并不抛出异常。例如：
const myResponse = Response.error();
try {
  myResponse.headers.set('Origin', 'http://mybank.com');
} catch (e) {
  console.log('Cannot pretend to be a bank!');
最好在在使用之前检查内容类型 content-type 是否正确，比如：
fetch(myRequest)
  .then(response => {
     const contentType = response.headers.get('content-type');
     if (!contentType || !contentType.includes('application/json')) {
       throw new TypeError("Oops, we haven't got JSON!");
     return response.json();
  .then(data => {
      /* process your data further */
  .catch(error => console.error(error));

由于 Headers 可以在 request 中被发送或者在 response 中被接收，并且规定了哪些参数是可写的，Headers 对象有一个特殊的 guard 属性。这个属性没有暴露给 Web，但是它影响到哪些内容可以在 Headers 对象中被操作。