fetch API

更新日期: 2019-05-25阅读: 4k标签: fetch

fetch

  • 一个获取资源的接口,类似于ajax
  • 是基于 Promise之上设计,旧版本IE 完全不支持,须借助 polyfill来兼容
  • 提供了对 Request 和 Response (以及其他与网络请求有关的)对象的通用定义
  • 发送请求或者获取资源,需要使用 window.fetch or WindowOrWorkerGlobalScope.fetch 方法。


参数

资源路径(url string)

  • 他必须接收一个需要请求的资源路径,返回一个promise对象,请求成功的数据返回到Responese回调中,请求失败的信息返回到 Request中。
  • 当接收到一个代表错误的 HTTP状态码时,fetch返回的promise不会被标记为 reject而会被标记为resolve,比如状态码为 404,500.只有网络故障或请求被阻止时才被标记为reject
fetch('https://api.apiopen.top/musicDetails1')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(myJson); //{code: 400, message: "404 Not Found", result: "https://api.apiopen.top/musicDetails1"}
  })

fetch 默认是不会从服务端发送接收或发送任何 cookie,如果需要则必须设置 credentials,自 2017/8 起默认的credentials政策变更为same-originFirefox也在61.0b13中改变默认值

[config]

配置项对象,包括所有对请求的设置

1.method: 请求使用的方法,如 GET、POST。

2.headers: 请求的头信息,形式为 Headers 的对象或包含 ByteString值的对象字面量。

3.body:请求的 body信息可能是:

  1. Blob( 表示一个不可变、原始数据的类文件对象)、
    BufferSource ( 用于表示自身为ArrayBuffer或者TypedArray提供对象的对象ArrayBufferView。)、
    FormData(表示表单数据的键值对的构造方式,经过它的数据可以使用XMLHttpRequest.send() 方法送出,本接口和此方法都相当简单直接。如果送出时的编码类型被设为 "multipart/form-data",它会使用和表单一样的格式。)、
    URLSearchParams (接口定义了一些实用的方法来处理 URL 的查询字符串)或者 USVString 对象。

4.mode: 请求的模式,如 cors、 no-cors 或者 same-origin。

5.credentials: 请求的 credentials,如 omit、same-origin 或者 include。为了在当前域名内自动发送 cookie , 必须提供这个选项, 从 Chrome 50 开始, 这个属性也可以接受 FederatedCredential 实例或是一个PasswordCredential 实例。

  1. 如果需要跨域请求需设置为 "include"
    如果只在同域内发送cookie 则设置为 "same-origin"
    如果任何情况都不发送cookie 则设置为 "omit"

6.cache: 请求的 cache 模式: default 、 no-store 、 reload 、 no-cache 、 force-cache 或者 only-if-cached 。

7.redirect: 可用的redirect 模式:follow(自动重定向), error (如果产生重定向将自动终止并且抛出一个错误), 或者manual (手动处理重定向). 在Chrome中,Chrome 47之前的默认值是 follow,从 Chrome 47开始是manual。

8.referrer: 一个USVString 可以是 no-referrer、client或一个URL。默认是client。

9.referrerPolicy:指定引用HTTP头的值。可能是一个 no-referrer、 no-referrer-when-downgrade、 origin、 origin-when-cross-origin、 unsafe-url 。

10.integrity: 包括请求的subresource integrity值 例如: sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=)。

const Fetch = function (url,config){
   if(typeof(config) !== 'object' || config === null) return throw `Config needs to pass an object type`
  let data = config || {} ;
  let {method = 'GET', param = null, mode = "cors", cache = "no-cache",headers = {'Access-Control-Allow-Origin': '*',
    'content-type': 'application/json'}, redirect = "follow", credentials = "include", referrer = "no-referrer"} = data;
  /*  // 传输 JSON 数据 需将 param 转换 
    JSON.stringify(param)
    //上传文件 需传输 formData 格式
    let formData = new FormData()
    let fileField = document.querySelector("#myFile")
    formData.append('title',"My File")
    formData.append('fileField ',fileField .files[0])
    
  */

  return  fetch(url,{
   method:method.toUpperCase(),
   body:param,
   mode,
   cache,
   headers,
   redirect,
   credentials,
}).then(res =>{
   if(res.ok) return res.json() 
    throw new Error("Network response fail:"+res.status)
}
).catch(err=>console.error(err))
}

Fetch('https://api.apiopen.top/musicDetails1',{credentials:'omit'}).then(res =>console.log(res)).catch(err=>console.error(err))


Headers constructor

创建一个 headers 对象,一个 headers 对象是一个简单的多名值对:

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


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

let content = "Hello World";
let 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")); // [ ]

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


检查 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!");
  }
});


Response 对象

  • fetch 返回的对象


对象中常用的属性

  1. status: 响应状态码 如 200 404 等
  2. statusText:返回和状态码对应信息
  3. ok 检查状态码是否 在 200-299之间,返回true or false


检查环境支持度

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


兼容性


链接: https://www.fly63.com/article/detial/3890

Fetch -- http请求的另一种姿势

传统Ajax是利用XMLHttpRequest(XHR)发送请求获取数据,不注重分离的原则。而Fetch API是基于Promise设计,专为解决XHR问题而出现。fetch API看起来简单,却是js语法不断增强提高带来的改善。

JavaScript中fetch接口的用法使用

fetch就是XMLHttpRequest的一种替代方案。如果有人问你,除了Ajax获取后台数据之外,还有没有其他的替代方案?这是你就可以回答,除了XMLHttpRequest对象来获取后台的数据之外,还可以使用一种更优的解决方案fetch。

当fetch遇到302状态码,会发生什么?

当fetch遇到302状态码,会发生什么?fetch不能拦截302,浏览器会自动从302响应的头信息的重定向地址中取到数据。针对认证的情况,后端可以返回401状态码,让前端去检查返回的状态码并据此执行相应操作。

Fetch使用

Fetch API 提供了一个获取资源的接口(包括跨域请求)。任何使用 过 XMLHttpRequest 的人都能轻松上手,但新的API提供了更强大和 灵活的功能集。Fetch 提供了对 Request 和 Response (以及其他与网络请求有关的)对象的通用定义。

fetch使用的常见问题及其解决办法

fetch默认不携带cookie配置其 credentials 项,其有3个值:omit: 默认值,忽略cookie的发送;same-origin: 表示cookie只能同域发送,不能跨域发送;include: cookie既可以同域发送,也可以跨域发送

fetch使用,ajax替代方案

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

TypeScript Fetch封装使用

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

通过fetch发送 post 请求下载文件

最近遇到一个下载的需求,由于 url 参数太长(常用的下载方法 a 标签或者 location.href 的方法都是 get 请求,get 请求参数长度有限制),无法下载,考虑了好几种方案,最终还是觉得通过 ajax 的 POST 方法进行下载,比较容易实现

Js中使用fetch进行异步请求

在 AJAX 时代,进行 API 等网络请求都是通过 XMLHttpRequest 或者封装后的框架进行网络请求。 现在产生的 fetch 框架简直就是为了提供更加强大、高效的网络请求而生,虽然在目前会有一点浏览器兼容的问题

Fetch API速查表:9个最常见的API请求

对于Fetch API我相信你已经用过它们很多次了,但是你是否还记得语法?如果能避免在旧项目中寻找半年前使用过的特定请求的语法,岂不更好?在本文中,我将列出9个最常见的Fetch API请求

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!