JavaScript使用Fetch的方法详解

目录
  • 进行 fetch 请求
  • 支持的请求参数
  • 发送带凭据的请求
  • 上传 JSON 数据
  • 上传文件
  • 上传多个文件
  • 检测请求是否成功
  • 自定义请求对象
  • Headers
  • Guard
  • Response 对象
  • Body
  • 特性检测

Fetch API 提供了一个 JavaScript接口,用于访问和操纵HTTP管道的部分,例如请求和响应。它还提供了一个全局 fetch()方法,该方法提供了一种简单,合理的方式来跨网络异步获取资源。

这种功能以前是使用 XMLHttpRequest实现的。Fetch提供了一个更好的替代方法,可以很容易地被其他技术使用,例如 Service Workers。Fetch还提供了单个逻辑位置来定义其他HTTP相关概念,例如CORS和HTTP的扩展。

请注意,fetch规范与jQuery.ajax()主要有两种方式的不同,牢记:

  • 当接收到一个代表错误的 HTTP 状态码时,从 fetch()返回的 Promise 不会被标记为 reject, 即使该 HTTP 响应的状态码是 404 或 500。相反,它会将 Promise 状态标记为 resolve (但是会将 resolve 的返回值的 ok 属性设置为 false ),仅当网络故障时或请求被阻止时,才会标记为 reject。
  • 默认情况下,fetch 不会从服务端发送或接收任何 cookies, 如果站点依赖于用户 session,则会导致未经认证的请求(要发送 cookies,必须设置 credentials 选项)。自从2017年8月25日后,默认的credentials政策变更为same-originFirefox也在61.0b13中改变默认值

进行 fetch 请求

一个基本的 fetch请求设置起来很简单。看看下面的代码:

fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(myJson);
  });

这里我们通过网络获取一个JSON文件并将其打印到控制台。最简单的用法是只提供一个参数用来指明想fetch()到的资源路径,然后返回一个包含响应结果的promise(一个 Response 对象)。

当然它只是一个 HTTP 响应,而不是真的JSON。为了获取JSON的内容,我们需要使用 json()方法(在Bodymixin 中定义,被 RequestResponse 对象实现)。

注意:Body mixin 还有其他相似的方法,用于获取其他类型的内容。参考 Body

最好使用符合内容安全策略 (CSP)的链接而不是使用直接指向资源地址的方式来进行Fetch的请求。

支持的请求参数

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

参考 fetch(),查看所有可选的配置和更多描述。

// Example POST method implementation:

postData('http://example.com/answer', {answer: 42})
  .then(data => console.log(data)) // JSON from `response.json()` call
  .catch(error => console.error(error))

function postData(url, data) {
  // Default options are marked with *
  return fetch(url, {
    body: JSON.stringify(data), // must match 'Content-Type' header
    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
    credentials: 'same-origin', // include, same-origin, *omit
    headers: {
      'user-agent': 'Mozilla/4.0 MDN Example',
      'content-type': 'application/json'
    },
    method: 'POST', // *GET, POST, PUT, DELETE, etc.
    mode: 'cors', // no-cors, cors, *same-origin
    redirect: 'follow', // manual, *follow, error
    referrer: 'no-referrer', // *client, no-referrer
  })
  .then(response => response.json()) // parses response to JSON
}

发送带凭据的请求

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

fetch('https://example.com', {
  credentials: 'include'
})

如果你只想在请求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'
})

上传 JSON 数据

使用 fetch() POST JSON数据

var url = 'https://example.com/profile';
var data = {username: 'example'};

fetch(url, {
  method: 'POST', // or 'PUT'
  body: JSON.stringify(data), // data can be `string` or {object}!
  headers: new Headers({
    'Content-Type': 'application/json'
  })
}).then(res => res.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response));

上传文件

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

var formData = new FormData();
var 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())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response));

上传多个文件

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

var formData = new FormData();
var photos = document.querySelector("input[type='file'][multiple]");

formData.append('title', 'My Vegas Vacation');
formData.append('photos', photos.files);

fetch('https://example.com/posts', {
  method: 'POST',
  body: formData
})
.then(response => response.json())
.then(response => console.log('Success:', JSON.stringify(response)))
.catch(error => console.error('Error:', error));

检测请求是否成功

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

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

自定义请求对象

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

var myHeaders = new Headers();

var myInit = { method: 'GET',
               headers: myHeaders,
               mode: 'cors',
               cache: 'default' };

var myRequest = new Request('flowers.jpg', myInit);

fetch(myRequest).then(function(response) {
  return response.blob();
}).then(function(myBlob) {
  var objectURL = URL.createObjectURL(myBlob);
  myImage.src = objectURL;
});

Request()fetch() 接受同样的参数。你甚至可以传入一个已存在的 request 对象来创造一个拷贝:

var anotherRequest = new Request(myRequest,myInit);

这个很有用,因为 request 和 response bodies 只能被使用一次(译者注:这里的意思是因为设计成了 stream 的方式,所以它们只能被读取一次)。创建一个拷贝就可以再次使用 request/response 了,当然也可以使用不同的 init 参数。

注意clone() 方法也可以用于创建一个拷贝。它在语义上有一点不同于其他拷贝的方法。其他方法(比如拷贝一个 response)中,如果 request 的 body 已经被读取过,那么将执行失败,然而 clone() 则不会失败。

Headers

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

var content = "Hello World";
var myHeaders = new Headers();
myHeaders.append("Content-Type", "text/plain");
myHeaders.append("Content-Length", content.length.toString());
myHeaders.append("X-Custom-Header", "ProcessThisImmediately");

也可以传一个多维数组或者对象字面量:

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.getAll("X-Custom-Header")); // ["ProcessThisImmediately", "AnotherValue"]

myHeaders.delete("X-Custom-Header");
console.log(myHeaders.getAll("X-Custom-Header")); // [ ]

虽然一些操作只能在 ServiceWorkers 中使用,但是它提供了更方便的操作 Headers 的 API。

如果使用了一个不合法的HTTP Header属性名,那么Headers的方法通常都抛出 TypeError 异常。如果不小心写入了一个不可写的属性,也会抛出一个 TypeError 异常。除此以外的情况,失败了并不抛出异常。例如:

var 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(function(response) {
  if(response.headers.get("content-type") === "application/json") {
    return response.json().then(function(json) {
      // process your JSON further
    });
  } else {
    console.log("Oops, we haven't got JSON!");
  }
});

Guard

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

可能的值如下:

  • none:默认的
  • request:从 request 中获得的 headers(Request.headers)只读
  • request-no-cors:从不同域(Request.mode no-cors)的 request 中获得的 headers 只读
  • response:从 response 中获得的 headers(Response.headers)只读
  • immutable:在 ServiceWorkers 中最常用的,所有的 headers 都只读。

注意:你不可以添加或者修改一个 guard 属性是 request 的 Request Headers 的 Content-Length 属性。同样地,插入 Set-Cookie 属性到一个 response headers 是不允许的,因此 ServiceWorkers 是不能给合成的 Response 的 headers 添加一些 cookies。

Response 对象

如上述, Response 实例是在 fetch() 处理完promises之后返回的。

你会用到的最常见的response属性有:

  • Response.status — 整数(默认值为200) 为response的状态码.
  • Response.statusText — 字符串(默认值为"OK"),该值与HTTP状态码消息对应.
  • Response.ok — 如上所示, 该属性是来检查response的状态是否在200-299(包括200,299)这个范围内.该属性返回一个Boolean值.

它的实例也可用通过 JavaScript 来创建, 但只有在ServiceWorkers中才真正有用,当使用respondWith()方法并提供了一个自定义的response来接受request时:

var myBody = new Blob();

addEventListener('fetch', function(event) {
  event.respondWith(new Response(myBody, {
    headers: { "Content-Type" : "text/plain" }
  });
});

Response() 构造方法接受两个可选参数—response的数据体和一个初始化对象(与Request()所接受的init参数类似.)

注意: 静态方法error()只是返回了一个错误的response. 与此类似地, redirect() 只是返回了一个可以重定向至某URL的response. 这些也只与Service Workers才有关。

Body

不管是请求还是响应都能够包含body对象. body也可以是以下任意类型的实例.

  • ArrayBuffer
  • ArrayBufferView (Uint8Array等)
  • Blob/File
  • string
  • URLSearchParams
  • [FormData]("FormData 接口提供了一种表示表单数据的键值对的构造方式,经过它的数据可以使用 XMLHttpRequest.send() 方法送出,本接口和此方法都相当简单直接。如果送出时的编码类型被设为 "multipart/form-data",它会使用和表单一样的格式。")

Body 类定义了以下方法 (这些方法都被 RequestResponse所实现)以获取body内容. 这些方法都会返回一个被解析后的Promise对象和数据.

  • arrayBuffer()
  • blob()
  • json()
  • [text()]("Body混入的 text() 方法提供了一个可供读取的"返回流", ——它返回一个包含USVString对象 (text)的Promise对象,返回结果的编码为UTF-8。")
  • formData()

比起XHR来,这些方法让非文本化的数据使用起来更加简单。

请求体可以由传入body参数来进行设置:

var form = new FormData(document.getElementById('login-form'));
fetch("/login", {
  method: "POST",
  body: form
})

request和response(包括fetch() 方法)都会试着自动设置Content-Type。如果没有设置Content-Type值,发送的请求也会自动设值。

特性检测

Fetch API 的支持情况,可以通过检测Headers, Request, Responsefetch()是否在WindowWorker 域中。例如:

if(self.fetch) {
    // run my fetch request here
} else {
    // do something with XMLHttpRequest?
}

到此这篇关于JavaScript使用Fetch的方法详解的文章就介绍到这了,更多相关JavaScript Fetch内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • JavaScript fetch接口案例解析

    在 AJAX 时代,进行 API 等网络请求都是通过 XMLHttpRequest 或者封装后的框架进行网络请求. 现在产生的 fetch 框架简直就是为了提供更加强大.高效的网络请求而生,虽然在目前会有一点浏览器兼容的问题,但是当我们进行 Hybrid App 开发的时候,如我之前介绍的 Ionic 和 React Native,都可以使用 fetch 进行完美的网络请求. 如果看网上的fetch教程,会首先对比XMLHttpRequest和fetch的优劣,然后引出一堆看了很快会忘记的内容(

  • fetch 使用及如何接收JS传值

    使用fetch基本方式: fetch('https://mywebsite.com/endpoint/', { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json'}, body: JSON.stringify({ username: 'username', password: 'password'}) }).then(function(res){ console.l

  • JavaScript 用fetch 实现异步下载文件功能

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>sample</title> </head> <body> <button id='btn'>下载</button> <span id='status'></span> &

  • JavaScript利用fetch实现异步请求的方法实例

    前言 相信大家应该都有所了解,在这个AJAX时代,如果想进行 API 等网络请求都是通过 XMLHttpRequest 或者封装后的框架进行网络请求. 现在产生的 fetch 框架简直就是为了提供更加强大.高效的网络请求而生,虽然在目前会有一点浏览器兼容的问题,但是当我们进行一些异步请求时,都可以使用 fetch 进行完美的网络请求.下面话不多说,来一起看看详细的介绍吧. 先来看看各个浏览器对fetch的原生支持情况,可以看到支持性并不是很高,safari在10.1 之后才支持,ios更是10.

  • javascript实现fetch请求返回的统一拦截

    拦截器的目的 拦截器(interceptors)一般用于发起 http 请求之前或之后对请求进行统一的处理, 如 token 实现的登录鉴权(每个请求带上 token),统一处理 404 响应等等. 之前的实现 区别于 axios,fetch 没有搜到请求返回拦截器相关 api,那之前是怎么实现统一拦截的呢, 参照 antd-pro,写一个统一的请求方法,所有的请求都调用这个方法,从而实现请求与返回的拦截. 这样我们每次都要去引入这个方法使用,那么有没有更好实现呢? 常见的一道面试题 vue 双

  • js fetch异步请求使用实例详解

    目录 认识异步 fetch(url) response.json() 结合async和await 异常处理 post请求 总结 认识异步 首先我们得明白请求是一个异步的过程. 因为请求需要时间向服务器发送请求和接收请求结果. 我们得要等待请求完成然后执行请求完成后的回调,来对接收到的请求结果做处理. fetch(url) 为了方便学习,我们借用一下uni-app教程的api接口. const url = 'https://unidemo.dcloud.net.cn/api/news' 我们需要知

  • JavaScript使用Fetch的方法详解

    目录 进行 fetch 请求 支持的请求参数 发送带凭据的请求 上传 JSON 数据 上传文件 上传多个文件 检测请求是否成功 自定义请求对象 Headers Guard Response 对象 Body 特性检测 Fetch API 提供了一个 JavaScript接口,用于访问和操纵HTTP管道的部分,例如请求和响应.它还提供了一个全局 fetch()方法,该方法提供了一种简单,合理的方式来跨网络异步获取资源. 这种功能以前是使用 XMLHttpRequest实现的.Fetch提供了一个更好

  • JavaScript数据类型的存储方法详解

    一个很基础的知识点,JavaScript中基本数据类型和引用数据类型是如何存储的. 由于自己是野生程序员,在刚开始学习程序设计的时候没有在意内存这些基础知识,导致后来在提到"什么什么是存在栈中的,栈中只是存了一个引用"这样的话时总是一脸懵逼.. 后来渐渐的了解了一些内存的知识,这部分还是非常有必要了解的. 基本数据结构 栈 栈,只允许在一段进行插入或者删除操作的线性表,是一种先进后出的数据结构. 堆 堆是基于散列算法的数据结构. 队列 队列是一种先进先出(FIFO)的数据结构. Jav

  • 利用JavaScript构建树形图的方法详解

    目录 什么是树形图 浏览JS树形图 创建一个基本的JS树形图 1. 创建一个HTML页面 2. 参考JavaScript文件 3.设置数据 4. 编写一些JS树形图代码 自定义JS树形图 A. 改变颜色 B. 应用线性色标 C. 格式化标签和工具提示 D. 按升序排列图块 树形图可视化广泛用于分层数据分析.如果你没有经验还想创建一个,那将会有些复杂.下面是一个详细教程,教你如何使用JavaScript创建交互式树形图. 宇宙中只有我们吗?我们每个人都曾在某个时候问过自己这个问题.当我们在考虑地球

  • JavaScript数据类型检测实现方法详解

    目录 一.typeof 二.instanceof 三.Object.prototype.toString.call() 面试问题 一.typeof 优点:能快速判断基本数据类型,除了 Null: 缺点:不能判别 Object.Array.Null ,都返回 object:判别引用类型除函数显示 function外,其他显示为 object console.log(typeof 55); // number console.log(typeof true); // boolean console.

  • javascript瀑布流布局实现方法详解

    本文实例讲述了javascript瀑布流布局实现方法.分享给大家供大家参考,具体如下: html结构: <div id="waterfall"> <div class="mod-box"> <div class="mod-img">...</div> </div> <div class="mod-box"> <div class="mod-

  • JavaScript中数组Array方法详解

    ECMAScript 3在Array.prototype中定义了一些很有用的操作数组的函数,这意味着这些函数作为任何数组的方法都是可用的. 1.Array.join()方法 Array.join()方法将数组中所有元素都转化为字符串并连接在一起,返回最后生成的字符串.可以指定一个可选的符号或字符串在生成的字符串中来分隔数组的各个元素.如果不指定分隔符,默认使用逗号.注意:此方法不会改变原始数组 var arr = ['a', 'b', 'c']; console.log(arr.join());

  • JavaScript Array对象基本方法详解

    昨天出去前端面试又失败,期间问了个有关于数组对象的问题,下面就这类问题总结下JavaScript常用的数组操作方法. 一.何为数组(Array)对象 数组对象是使用单独的变量名来存储一系列的值. 二.创建数组的三种方式 2.1使用关键词 new 来创建数组对象. let myStar =new Array(); myStar[0]="刘德华"; myStar[1]="成龙"; myStar[2]="林青霞"; myStar[3]="王菲

  • JavaScript图片旋转效果实现方法详解

    在Canvas API中,上下文CanvasRenderingContext2D对象提供了一个与坐标旋转相关的方法: void rotate(in float angle); // 按给定的弧度顺时针旋转angle rotate()方法旋转的中心始终是canvas的原点.如果要改变旋转中心,需要使用translate方法. 我们可以将绘制的图形每隔一定的时间间隔后,旋转一定的角度重新绘制一次,这样就可以得到旋转的动画效果. 1.旋转的扇叶 将一个梯形按顺时针旋转90°的方式绘制4次,可以绘制出一

  • JavaScript创建数组的方法详解

    目录 JavaScript创建数组 数组的使用 将数组转换为分割字符串 数组中新增元素 筛选数组 删除数组指定元素 总结 JavaScript创建数组 1.利用new创建数组 var arr = new Array();//创建了一个空数组 2.利用数组字面量创建数组(比较常用) 字面量:一种固定值的表示方法 一看就知道什么数据类型,比如8一看就是数字类型 //1.利用数组字面量(是方括号)创建数组 var arr = [];//创建了一个空数组 var arr1 = [1,2,'student

  • javascript表单事件处理方法详解

    本文实例为大家分享了javascript处理表单事件的常用方法,供大家参考,具体内容如下 1.访问表单对象的常用方法: ①:根据<form>元素的id属性: var myform=document.getElementById("myformid");  //myformid是某个<form>元素的ID: ②:根据<form>元素的name属性: var myform=document.forms["myformname"]; /

随机推荐