【译】fetch用法说明

2024-03-14 02:38
文章标签 fetch 用法说明

本文主要是介绍【译】fetch用法说明，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

由于 FetchAPI 是基于 Promise 设计，有必要先学习一下 Promise

语法说明

fetch(url, options).then(function(response) {// handle HTTP response
}, function(error) {// handle network error
})

具体参数案例：

//兼容包
require('babel-polyfill')
require('es6-promise').polyfill()import 'whatwg-fetch'fetch(url, {method: "POST",body: JSON.stringify(data),headers: {"Content-Type": "application/json"},credentials: "same-origin"
}).then(function(response) {response.status     //=> number 100–599response.statusText //=> Stringresponse.headers    //=> Headersresponse.url        //=> Stringresponse.text().then(function(responseText) { ... })
}, function(error) {error.message //=> String
})
url

定义要获取的资源。这可能是：

  • 一个 USVString 字符串，包含要获取资源的 URL。

  • 一个 Request 对象。

options（可选）

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

  • method: 请求使用的方法，如 GET、POST。

  • headers: 请求的头信息，形式为 Headers 对象或 ByteString。

  • body: 请求的 body 信息：可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象。注意GET 或 HEAD 方法的请求不能包含 body 信息。

  • mode: 请求的模式，如 cors、 no-cors 或者 same-origin。

  • credentials: 请求的 credentials，如 omit、same-origin 或者 include。

  • cache: 请求的 cache 模式: default, no-store, reload, no-cache, force-cache, 或者 only-if-cached。

response

一个 Promise，resolve 时回传 Response 对象：

  • 属性：

    • status (number) - HTTP请求结果参数，在100–599 范围

    • statusText (String) - 服务器返回的状态报告

    • ok (boolean) - 如果返回200表示请求成功则为true

    • headers (Headers) - 返回头部信息，下面详细介绍

    • url (String) - 请求的地址

  • 方法：

    • text() - 以string的形式生成请求text

    • json() - 生成JSON.parse(responseText)的结果

    • blob() - 生成一个Blob

    • arrayBuffer() - 生成一个ArrayBuffer

    • formData() - 生成格式化的数据，可用于其他的请求

  • 其他方法：

    • clone()

    • Response.error()

    • Response.redirect()

response.headers

  • has(name) (boolean) - 判断是否存在该信息头

  • get(name) (String) - 获取信息头的数据

  • getAll(name) (Array) - 获取所有头部数据

  • set(name, value) - 设置信息头的参数

  • append(name, value) - 添加header的内容

  • delete(name) - 删除header的信息

  • forEach(function(value, name){ ... }, [thisContext]) - 循环读取header的信息

使用案例

GET请求

  • HTML

    fetch('/users.html').then(function(response) {return response.text()}).then(function(body) {document.body.innerHTML = body})

  • IMAGE

    var myImage = document.querySelector('img');fetch('flowers.jpg').then(function(response) {return response.blob();}).then(function(myBlob) {var objectURL = URL.createObjectURL(myBlob);myImage.src = objectURL;});

  • JSON

    fetch(url).then(function(response) {return response.json();}).then(function(data) {console.log(data);}).catch(function(e) {console.log("Oops, error");});

使用 ES6 的 箭头函数 后：

fetch(url).then(response => response.json()).then(data => console.log(data)).catch(e => console.log("Oops, error", e))

response的数据

fetch('/users.json').then(function(response) {console.log(response.headers.get('Content-Type'))console.log(response.headers.get('Date'))console.log(response.status)console.log(response.statusText)
})
POST请求
fetch('/users', {method: 'POST',headers: {'Accept': 'application/json','Content-Type': 'application/json'},body: JSON.stringify({name: 'Hubot',login: 'hubot',})
})

检查请求状态

function checkStatus(response) {if (response.status >= 200 && response.status < 300) {return response} else {var error = new Error(response.statusText)error.response = responsethrow error}
}function parseJSON(response) {return response.json()
}fetch('/users').then(checkStatus).then(parseJSON).then(function(data) {console.log('request succeeded with JSON response', data)}).catch(function(error) {console.log('request failed', error)})

采用promise形式

Promise 对象是一个返回值的代理，这个返回值在promise对象创建时未必已知。它允许你为异步操作的成功或失败指定处理方法。 这使得异步方法可以像同步方法那样返回值：异步方法会返回一个包含了原返回值的 promise 对象来替代原返回值。

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve方法和reject方法。如果异步操作成功，则用resolve方法将Promise对象的状态变为“成功”（即从pending变为resolved）；如果异步操作失败，则用reject方法将状态变为“失败”（即从pending变为rejected）。

promise实例生成以后，可以用then方法分别指定resolve方法和reject方法的回调函数。

//创建一个promise对象
var promise = new Promise(function(resolve, reject) {if (/* 异步操作成功 */){resolve(value);} else {reject(error);}
});
//then方法可以接受两个回调函数作为参数。
//第一个回调函数是Promise对象的状态变为Resolved时调用，第二个回调函数是Promise对象的状态变为Reject时调用。
//其中，第二个函数是可选的，不一定要提供。这两个函数都接受Promise对象传出的值作为参数。
promise.then(function(value) {// success
}, function(value) {// failure
});

那么结合promise后fetch的用法：

//Fetch.js
export function Fetch(url, options) {options.body = JSON.stringify(options.body)const defer = new Promise((resolve, reject) => {fetch(url, options).then(response => {return response.json()}).then(data => {if (data.code === 0) {resolve(data) //返回成功数据} else {if (data.code === 401) {//失败后的一种状态} else {//失败的另一种状态}reject(data) //返回失败数据}}).catch(error => {//捕获异常console.log(error.msg)reject() })})return defer
}

调用Fech方法：

import { Fetch } from './Fetch'Fetch(getAPI('search'), {method: 'POST',options
})
.then(data => {console.log(data)
})

支持状况及解决方案

原生支持率并不高，幸运的是，引入下面这些 polyfill 后可以完美支持 IE8+ ：

  • 由于 IE8 是 ES3，需要引入 ES5 的 polyfill: es5-shim, es5-sham

  • 引入 Promise 的 polyfill: es6-promise

  • 引入 fetch 探测库：fetch-detector

  • 引入 fetch 的 polyfill: fetch-ie8

  • 可选：如果你还使用了 jsonp，引入 fetch-jsonp

  • 可选：开启 Babel 的 runtime 模式，现在就使用 async/await

翻译自  Fetch

这篇关于【译】fetch用法说明的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/806964。

相关文章

fetch-event-source 如何通过script全局引入

fetch-event-source 如何通过script全局引入

fetchEventSource源码中导出了两种类型的包cjs和esm。但是有个需求如何在原生是js中通过script标签引呢？需要加上type=module。今天介绍另一种方法 下载源码文件： https://github.com/Azure/fetch-event-source.git 安装: npm install --save-dev webpack webpack-cli ts
阅读更多...
Typora配置PicGo时，提示Failed to fetch

Typora配置PicGo时，提示Failed to fetch

Typora配置PicGo时，提示Failed to fetch 两者配置的端口不一致造成的 打开Typora，选择文件-偏好设置-图像-验证图片上传选项，点击验证图片上传选项 会提示错误：Failed to fetch，此时可以发现typora中设置的上传端口为36677 打开PigGo，选择PicGo设置-设置server，会发现监听端口为36678 修改监听接口为366
阅读更多...
【git】Git 工具 - 储藏（Stashing）git fetch/pull

【git】Git 工具 - 储藏（Stashing）git fetch/pull

常用 Git 命令清单点击打开链接 储藏（Stashing） 经常有这样的事情发生，当你正在进行项目中某一部分的工作，里面的东西处于一个比较杂乱的状态，而你想转到其他分支上进行一些工作。问题是，你不想提交进行了一半的工作，否则以后你无法回到这个工作点。解决这个问题的办法就是git stash命令。 “‘储藏”“可以获取你工作目录的中间状态——也就是你修改过的被追踪的文件和暂存的变更
阅读更多...
xhr、ajax、axois、fetch的区别

xhr、ajax、axois、fetch的区别

一、XMLHttpRequest (XHR)、AJAX、Axios 和 Fetch API 都是用于在不重新加载整个页面的情况下与服务器进行通信的技术和库。它们在处理超时、终止请求、进度反馈等机制上有一些显著的差异。以下是它们的详细比较： 1. XMLHttpRequest (XHR) XMLHttpRequest 是一种浏览器内置的对象，用于与服务器进行交互。它可以发送和接收各种格式的数据，
阅读更多...
git pull、git fetch以及pull request的区别

git pull、git fetch以及pull request的区别

git pull根据不同的配置，可等于fetch + merge或fetch + rebase。要理解它们的区别，首先需要明白git架构，它是分布式版本管理系统。画了张图，不仅仅涉及到git fetch和git pull，对整体理解也会很有帮助。如下： 上图展示了git的整体架构，以及和各部分相关的主要命令，先说明下其中涉及的各部分： 工作区(working directory)，简言之就
阅读更多...
Spring Data Jpa 关于fetch join 的错误

Spring Data Jpa 关于fetch join 的错误

spring data jpa 文档的官方网站： https://docs.spring.io/spring-data/jpa/docs/current/reference/html/ 在开发中使用到 Jpa Dao 方法时，出现如下错误： fetch join... but the owner of the fetched association was not present
阅读更多...
git命令之fetch

git命令之fetch

理解fetch的关键是要理解FETCH_HEAD，FETCH_HEAD是某个branch在服务器上的最新状态，每一个执行过fetch操作的项目都会存在一个FETCH_HEAD列表，这个列表保存在.git/FETCH_HEAD文件中，其中每一行对应于远程服务器的一个分支，当前分支指向的FETCH_HEAD，就是这个文件第一行多对应的那个分支。例如下面的这个图 一般来说，存在两种情况：1.如果
阅读更多...
后端输出二进制数据，前端fetch接受二进制数据，并转化为字符输出

后端输出二进制数据，前端fetch接受二进制数据，并转化为字符输出

在PHP中，你可以将字符串或其他数据类型转换为二进制数据，并通过HTTP响应发送给前端。 <?php//设置正确的Content-Type头部，以便前端可以正确处理二进制数据header('Content-Type:application/octet-stream');$str ="hello world!";$binaryData=hex2bin(bin2hex($str));ech
阅读更多...
git学习之——git fetch git pull

git学习之——git fetch git pull

git branch dev : 创建分支 git checkout dev : 切换到该分支 git fetch —— git merge origin/dev  == git pull 把dev 分支合并到 master上： 1、git checkout master : 首先切换到 master分支 2、git merge dev 此处有坑： 若 master 的commit 提
阅读更多...
使用 fetch() 函数和 Response 对象的示例,创建一个新的 Response 对象来模拟一个自定义响应

使用 fetch() 函数和 Response 对象的示例,创建一个新的 Response 对象来模拟一个自定义响应

在这个示例中，我们首先使用 fetch() 发起一个GET请求到 apiURL。如果响应状态码表示成功（即 response.ok 为 true），我们将响应体转换为JSON。 然后，我们创建一个新的 Response 对象 newResponse，其中包含自定义的JSON字符串和一些自定义的响应头。这个新的 Response 对象具有200状态码和"OK"状态信息。 最后，我们解析这个新的 Re
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2