Fetch 使用教程

window 自带了 window.fetch 方法, 在最新版的 Firefox 和 Chrome 中已经提供支持,其他浏览器还有兼容性问题,要做兼容性处理。

一、fetch 安装

为了解决 fetch 的兼容性,我们使用 Fetch Polyfill 的版本  whatwg-fetch。

npm install --save whatwg-fetch
import 'whatwg-fetch'

也可以用另一个 fetch 版本 isomorphic-fetch

npm install --save isomorphic-fetch
import fetch from "isomorphic-fetch";

二、fetch 的基本使用

// url (必须), init对象 (可选)
fetch(url, init).then(function(res) {
    // fetch第一次拿到的是整个Response对象,要调用json()方法转成含有json数据的Promise
    return res.json();
}).catch(function(err) {
    // 中途任何地方出错...在此处理
});

GET 请求

fetch('http://localhost:8082/data/users.json?id=99')
  .then(function(res) {
    return res.json();
  })
  .then(function(myJson) {
    console.log(myJson);
  });

POST请求

请求参数以json形式传给后端

fetch('/api/getItems', {
    body: JSON.stringify(params), //json字符串和对象都可以,推荐使用json字符串,这样可以在控制台network里看到请求参数
    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
    credentials: 'include', // include, same-origin, *omit
    headers: {
      'Content-Type': 'application/json'
    },
    method: 'POST'
  }).then(response => response.json()).then(res => {
      console.log(res)
  })

请求参数以formData形式传给后端

import qs from 'query-string';

fetch('/api/getItems', {
    body: qs.stringify(params), //使用query-string把参数转换成'name=jim&age=22'形式,也可以直接用formData格式作为参数
    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
    credentials: 'include', // include, same-origin, *omit
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
    },
    method: 'POST'
  }).then(response => response.json()).then(res => {
      console.log(res)
  })

上传文件

可以通过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("/api/uploadFile", {
  method: "PUT",
  body: formData
})
  .then(response => response.json())
  .catch(error => console.error("Error:", error))
  .then(response => console.log("Success:", response));

new FormData() 可以直接传一个 form 元素作为参数。

{
    body: new FormData(document.getElementById('myForm'))
}

上传多个文件

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:', response))
.catch(error => console.error('Error:', error));

三、自定义请求对象

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

var myHeaders = new Headers();

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

var myRequest = new Request('/api/getItems', myInit);

fetch(myRequest).then(function(response) {
  return response.json();
}).then(function(res) {
    console.log(res)
});

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

var anotherRequest = new Request(myRequest,myInit);

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

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

四、其他

        当接收到一个代表错误的 HTTP 状态码时,从 fetch()返回的 Promise 不会被标记为 reject, 即使该 HTTP 响应的状态码是 404 或 500。相反,它会将 Promise 状态标记为 resolve (但是会将 resolve 的返回值的 ok 属性设置为 false ),仅当网络故障时或请求被阻止时,才会标记为 reject。当状态码在200-299之间时,ok 属性才会返回 true。

        默认情况下,fetch 不会从服务端发送或接收任何 cookies, 如果站点依赖于用户 session,则会导致未经认证的请求(要发送 cookies,必须设置 credentials 选项为 include)。自从2017年8月25日后,默认的credentials政策变更为same-originFirefox也在61.0b13中改变默认值

五、Init 对象

一个配置项对象,包括所有对请求的设置。可选的参数有:

1. method - 支持 GETPOSTPUTDELETEHEAD

2. headers - 对应的 Headers 对象

3. body - 请求参数

4. credentials - 设置 cookies 是否随请求一起发送。

   可选值: omit: (默认, 不发送 Cookie)

       same-origin:同域下自动发送 Cookie

       include:始终发送 Cookie,即使是跨域。

5. mode - 是否允许跨域请求,以及哪些响应的属性是可读的。

    可选值:cors(默认, 允许跨域请求,将遵守 CORS 协议

        no-cors该模式允许来自 CDN 的脚本、其他域的图片和其他一些跨域资源。前提条件是请求的 method 只能是 HEAD、GET 或 POST。而且 js 不能访问 Response 对象中的任何属性

                 same-origin:要同源,不允许跨域

        navigate:支持导航的模式,仅用于 HTML 导航。

6. cache - 设置缓存模式。

    可选值: default:浏览器在其 HTTP 缓存中查找匹配的请求。

             a. 如果匹配并且是新鲜的,它将从缓存中返回。

             b. 如果存在匹配但已失效,则浏览器将向远程服务器发出有条件的请求。如果服务器指出资源没有改变,它将从缓存中返回。否则资源将从服务器下载并且缓存将被更新。

             c. 如果没有匹配,浏览器将发出正常的请求,并且下载的资源更新缓存。

         no-store:浏览器从远程服务器获取资源,而不先查看缓存,并且不会使用下载的资源更新缓存。

         reload:浏览器从远程服务器获取资源,而不先查看缓存,但随后将使用下载的资源更新缓存。

         no-cache:浏览器在其 HTTP 缓存中查找匹配的请求。

             a. 如果匹配,新鲜或陈旧,浏览器将向远程服务器发出有条件的请求。如果服务器指出资源没有改变,它将从缓存中返回。否则资源将从服务器下载并且缓存将被更新。

             b. 如果没有匹配,浏览器将发出正常的请求,并用下载的资源更新缓存。

         force-cache:浏览器在其 HTTP 缓存中查找匹配的请求。

             a. 如果有匹配,新鲜或陈旧,它将从缓存中返回。

             b. 如果没有匹配,浏览器将发出正常的请求,并用下载的资源更新缓存。

         only-if-cached:浏览器在其 HTTP 缓存中查找匹配的请求。只能用在 mode 为 same-origin 的情况下

             a. 如果匹配,新鲜或陈旧,将从缓存中返回。

             b. 如果没有匹配,浏览器将返回一个错误。

7. referrer - 请求的引用者(例如:client)

8. redirect - 定义重定向处理方式。

      可选值:follow(默认), error, manual。

9. integrity - 子资源完整性值。

 

六、Body

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

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

fetch("/api/getItems").then(res => {
  return res.json();
});

 

 

参考文献:https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch

 

 

 

  • 5
    点赞
  • 53
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值