Fetch使用

Posted liruijia

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Fetch使用相关的知识,希望对你有一定的参考价值。

Fetch API 提供了一个获取资源的接口(包括跨域请求)。任何使用
过 XMLHttpRequest 的人都能轻松上手,但新的API提供了更强大和
灵活的功能集。

概念和用法

Fetch 提供了对 Request 和 Response (以及其他与网络请求有关的)对象的通用定义。使
之今后可以被使用到更多地应用场景中:无论是service workers、Cache API、又或者是其他
处理请求和响应的方式,甚至是任何一种需要你自己在程序中生成响应的方式。

注意事项:

1. fetch() 必须接受一个参数——资源的路径
2. 无论请求成功与否,它都返回一个 Promise 对象,resolve 对应请求的 Response。你也
   可以传一个可选的第二个参数init。
3. 一旦 Response 被返回,就有一些方法可以使用了,比如定义内容或者处理方法(参见 Body)

参数

Promise<Response> fetch(input[, init]);

Input:
1. String类型,URL请求
2. Object类型,new Qeuest()

Init:
1. method: get、post...
2. headers: 要添加到请求的任何标头,包含在Headers对象或具有ByteString值的对象文字中。 请注意,某些名称是被禁止的。
3. body: 要添加到请求中的正文,请注意,使用GET或HEAD方法的请求不能包含正文。
4. mode: 您希望用于请求的模式,例如,cors,no-cors或同源。

举例子

const myImage = document.querySelector(‘img‘);

let myRequest = new Request(‘flowers.jpg‘);

fetch(myRequest)
.then(function(response) {
  if (!response.ok) {
    throw new Error(‘HTTP error, status = ‘ + response.status);
  }
  return response.blob();
})
.then(function(response) {
  let objectURL = URL.createObjectURL(response);
  myImage.src = objectURL;
});
const myImage = document.querySelector(‘img‘);

let myHeaders = new Headers();
myHeaders.append(‘Content-Type‘, ‘image/jpeg‘);

const myInit = { method: ‘GET‘,
               headers: myHeaders,
               mode: ‘cors‘,
               cache: ‘default‘ };

let myRequest = new Request(‘flowers.jpg‘);

fetch(myRequest,myInit).then(function(response) {
  ... 
});

以上是关于Fetch使用的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 fetch 从一个模块导出从 GET API 获得的响应数据到另一个模块

回归 | js实用代码片段的封装与总结(持续更新中...)

TP5报如下的错误 Indirect modification of overloaded element of thinkpaginatorCollection has no effect(代码片段

Vue-Select:如何将此 fetch() 代码转换为使用 axios?

齐博分类系统漏洞分析

在 javascript 中的另一个 fetch 中使用 fetch