ES6 fetch()方法详解

于 2024-04-02 22:05:31 发布
阅读量520 收藏 8
点赞数 5
文章标签： okhttp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuxingwu9872/article/details/137293603
版权

fetch()方法

ECMAscript官方继续推出了一个基于Promise的请求方法, 更简单, 更便捷。

就是fetch()方法，这个方法可以替代传统Ajax请求, 返回Promise的实例。

fetch()函数是ECMAscript提出的新的特性, 它：

能够发出Ajax请求, 并且请求原理不是xhr, 而是新的原理；

天生可以跨域, 但是需要设置头, 服务器可以写脚本识别这个头部判断是否应该拒绝它；

fetch()返回Promise对象, 所以可以用then和catch方法, then方法的第一个函数是resolve, 这个resolve的返回值将自动被await等号左边的变量的接收。

必须写async和await。

fetch的语法

fetch(url)
.then(res => console.log(res))
.then(res => console.log(res))

.catch(err => console.log(err));

使用场景1

async function main(){
//请求回来的数据都存在body中，作为一种可读的流返回，要使用json方法转换
var data1 = await fetch("data/1.json").then(data=>data.json());
var data2 = await fetch("data/2.json").then(data=>data.json());
var data3 = await fetch("data/3.json").then(data=>data.json());
console.log(data1)
console.log(data2)
console.log(data3)
};
main();

使用场景2

// 请求JSON数据
async function getUsers(){
const res = await fetch("https://www.xxx.com");
const data = await res.json();
return data;
}
getUsers()
.then((users) => console.log(users))
.catch((err) => console.log(err))

可以不用jQuery了！传统Ajax已死，fetch永生。

兼容性注意：

babel没有任何插件可以翻译fetch为传统Ajax。

fetch只能用在浏览器环境, 不能用在Nodejs环境。

fetch请求的两种数据格式

html结构：

<div>
<button id="btn1">请求本地文本数据</button>
<button id="btn2">请求网络json数据</button>
<div id="output"></div>
</div>

JavaScript逻辑：

<script>

document.getElementById('btn1').addEventListener('click', getText);
document.getElementById('btn2').addEventListener('click', getJson);
// 获取本地纯文本数据
function getText(){
fetch("test.txt").then(res => res.text())
.then(data => {console.log(data)})
.catch(err => console.log(err));
}
// 获取json数据
function getJson(){
fetch("posts.json")
.then(res => res.json())
.then(data => { console.log(data)})
.catch(err => console.log(err));
}
</script>

fetch方法的配置

fetch()方法的第二个参数是配置参数, 可以配置发送POST/PUT/DELETE等请求类型。

fetch('url', [options]);

实践中, post请求会像下面这样：

fetch('url', {
method: 'post',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({name:'小明'})
})
.then(data=>{console.log(data)})
.catch(err=>{console.log(err)})

method请求类型参数：

设置请求方式(如POST | PUT | DELETE), fetch默认请求方式为GET。

headers请求头参数

向服务器说明希望的到什么待遇, 这里主要用到Content-Type

因为一般使用JSON数据格式, 所以设置Content-Type为application/json

body参数设置报文体

要发送给后端的内容, 如果发送JSON数据, 必须调用JSON.stringify()方法。

credentials证书参数

因为默认情况下, fetch不会从服务端发送或接收任何cookies, 所以可以配置以下参数指定发送cookies的情况, 默认值：same-origin, 以下为可选值：

omit: 不发送cookies

same-origin: 在同域情况下发送cookies

include: 同域或跨域都发送cookies

可以理解为：

跨域请求是否提供凭据信息(cookie、HTTP认证及客户端SSL证明等)

也可以简单的理解为, 当前请求为跨域类型时是否在请求中协带cookie。

基于Promise封装fetch请求库

用ES6的class类封装一个函数

app.js

/*
* 基于Promise封装fetch请求库
*/
class FetchHttp{
// 封装get请求
get(url){
return new Promise((resolve,reject)=>{
fetch(url)
.then(data => resolve(data.json()))
.catch(err => reject(err))
})
}
// 封装post请求
post(url, data){
return new Promise((resolve, reject)=>{
fetch(url, {
method:"POST",
headers:{'Content-type':'application/json'},
body:JSON.stringify(data)
})
.then(data => resolve(data.json()))
.catch(err => reject(err))
})
}
// 封装put请求
put(url, data){
return new Promise((resolve, reject)=>{
fetch(url, {
method:"PUT",
headers:{'Content-type':'application/json'},
body:JSON.stringify(data)
})
.then(data => resolve(data.json()))
.catch(err => reject(err))
})
}
// 封装delete请求
delete(url){
return new Promise((resolve, reject)=>{
fetch(url, {
method:"DELETE",
headers:{'Content-type':'application/json'},
})
.then(data => resolve('数据删除成功！'))
.catch(err => reject(err))
})
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
</body>
<script src="js/app.js"></script>
<script>
const http = new FetchHttp; //引入函数
const data = {
name:"小明",
sex:"男",
age:29
}
http.delete("https://www.xxx.com")
.then(data=>{console.log(data)})
.catch(err=>{console.log(err)})
</script>
</html>

基于async封装fetch请求库app.js

/*
* 基于async/await封装fetch请求库
*/
class FetchHttp{
// 封装get请求
async get(url){
const res = await fetch(url)
return await res.json()
}
// 封装post请求
async post(url, data){
const res = await fetch(url,{
method:"POST",
headers:{'Content-type':'application/json'},
body:JSON.stringify(data)
})
return await res.json()
}
// 封装put请求
async put(url, data){
const res = await fetch(url,{
method:"PUT",
headers:{'Content-type':'application/json'},
body:JSON.stringify(data)
})
return await res.json()
}
// 封装delete请求
async delete(url){
await fetch(url,{
method:"DELETE",
headers:{'Content-type':'application/json'},
})
return await '数据删除成功！'
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
</body>
<script src="js/app.js"></script>
<script>
const http = new FetchHttp; //引入函数
const data = {
name:"小明",
sex:"男",
age:29
}
// 删除数据请求（DELETE）
http.delete("https://www.xxx.com")
.then(data=>{console.log(data)})
.catch(err=>{console.log(err)})
</script>
</html>
yuxingwu9872
关注
  • 5
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
fetch向后端请求数据：get/post/put/patch/delete方式、解决catch不能主动捕获错误问题（超详细笔记）
YY的博客
12-14 8464
fetch向后端请求数据：get/post/put/patch/delete方式、解决catch不能主动捕获错误问题（超详细笔记）
ES6的Fetch异步请求的实现方法
10-17
主要介绍了ES6的Fetch异步请求的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
ES6 fetch函数与后台交互实现
10-17
最近在学习react-native，遇到调用后端接口的问题。看了看官方文档，推荐使用es6的fetch来与后端进行交互，这篇文章主要介绍了ES6 fetch函数与后台交互实现，感兴趣的小伙伴们可以参考一下
详解ES6 Fetch API HTTP请求实用指南
10-17
本次将介绍如何使用Fetch API（ES6 +）对REST API的 HTTP请求，还有一些示例提供给大家便于大家理解。具有一定的参考价值，感兴趣的小伙伴们可以参考一下
ES6-fetch的用法
Primise7的博客
05-15 1万+
事实标准，并不存在与ES6规范中，基于Promise实现。 目前项目中对Promise的兼容性尚存在问题，如果在项目中应用fetch，需要引入es6-promise和fetch。 当我们谈及Ajax技术的时候，通常意思就是基于XMLHttpRequest的Ajax，它是一种能够有效改进页面通信的技术。 XMLHttpRequest的最新替代技术——Fetch API， 它是W3C...
ES6中Fetch的封装及使用，炒鸡简单~
浩星
09-02 540
1、封装 （http.js） class Ajax { get(url) { return new Promise((resolve, reject) => { fetch(url) .then(res => res.json()) .then(data => resolve(data)) .catch(...
js ES6 fetch 方法
青蛙king的博客
07-19 7089
一、fetch 概述 fetch 是一种 HTTP 数据请求的方式，是 XMLHttpRequest 的一种替代方案。 fetch 不是 ajax 的进一步封装，没有使用 XMLHttpRequest对象。fetch 是原生 JavaScript。 fetch 与 ajax 的区别： fetch()返回的promise将不会拒绝http的错误状态，即使响应是一个HTTP 404或者500——当接收到一个代表错误的 HTTP 状态码时，从 fetch() 返回的 Promise 不会被标记为 reje
【ES6】fetch函数和Promise
最新发布
qq_22744093的博客
09-01 1099
在这个例子中，我们首先向https://api.example.com/data发起一个GET请求。如果解析失败，或者在任何其他步骤中发生错误，我们捕获这个错误并打印错误信息。注意，fetch并不直接返回请求的结果，而是返回一个Promise。它返回一个Promise，这个Promise在请求成功时解析为Response对象，或者在请求失败时拒绝。在这个例子中，我们使用async/await语法来等待Promise解析。这使得我们的代码看起来更像是同步的代码，但是实际上它仍然是异步的。
基于ES6中新增api方法fetch二次封装
hhhhhhaa1的博客
07-11 341
ES6内置的API，本身就是基于promise，用全新的方案实现客户端和服务器端的数据请求let promise实例(p) = fetch(请求地址,配置项)当请求成功，p的状态是fulfilled，值是请求回来的内容；如果请求失败，p的状态是rejected，值是失败原因！在fetch中，只要服务器有反馈信息（不论HTTP状态码是多少），都说明网络请求成功，最后的实例p都是fulfilled，只有服务器没有任何反馈（例如：请求中断、请求超时、断网等），实例p才是rejected！
原生fetch()，Es6中的promise
aflylong的博客
07-16 595
es6新方法fetch fetch（）方法与XMLHttpRequest类似，fetch也可以发起ajax请求，但是与XMLHttpRequest不同的是，fetch方式使用promise，相比较XMLHttpRequest更加简洁。 Promise promise是进行异步操作的一种解决方案，比传统的处理方法(回调函数/处理事件)更加合理，ES6将其加入语言标准，统一语法，原生提供了Promise，promise可以想象成一个装有各种结果的容器，里面装有某个时间返回的结构，可以在需要的时候拿取它并进行一些
ES6中新的AJAX解决方案：Promise、Fetch、Response、Axios
m0_53881899的博客
09-12 1087
Promise、Fetch、Response：ES6中新的AJAX解决方案
fetch请求理解和用法
Rain022111的博客
02-23 3925
接着我们调用Promise原型上的公有方法then(), then方法接收两个函数作为参数，第一个参数是 Promise 执行成功时的回调函数resolve，（resolve函数的参数就是Response 对象，所以要明白then方法中的res其实就是Response），第二个参数是 Promise 执行失败时的回调函数reject，两个函数只会有一个被调用。：fetch()发起请求以后，只有网络错误，或者无法连接时，fetch()才会报错，其他情况都认为请求成功。如果以后有需要补充的会继续回来写的。
ES6中的fetch请求
周家大小姐
09-27 4895
 基本使用结构: //测试接口 let url = 'http://jsonplaceholder.typicode.com/posts'; // console.log(fetch(url))//Promise {&lt;pending&gt;} 未执行 fetch(url) .then(response =&gt; response.json())//把response这个...
Fetch---ES6
coding
01-25 449
js原生支持，比XHR强大，易用的数据交互对象。 fetch的两个步骤 基本使用 fetch("url").then(res=>{},err=>{}); Response(res)对象成员 ok:是否成功 headers:响应头对象 status/statusText:状态码/状态文本 redirected:是否重定向过 fetch('../public/info.text').then(res => { console.log('res i
(转载)ES6 fetch函数与后台交互
AlexMeow的博客
11-03 624
http://www.cnblogs.com/Ricky-Huang/p/5566918.html 让我一个小白看懂了的帖子!转来收藏住!!!!!!!!!!!!!!!! ES6 fetch函数与后台交互 最近在学习react-native,遇到调用后端接口的问题.看了看官方文档,推荐使用es6的fetch来与后端进行交互,在网上找了一些资料.在这里整理,方便以后查询. 1.RN
ES6 fetch请求
肖皓文
05-24 527
先贴代码 看下 ajax 和fetch 之间的区别 { // 原生ajax function ajax(){ xmlHttp = new XMLHttpRequest(); xmlHttp.open('get','https://api.github.com/users',true) xmlHt...
ES6/7/8新特性Promise,async,await,fetch带我们逃离异步回调的深渊
热门推荐
wang839305939的博客
07-20 1万+
Promise,async,await,fetch解决js中的异步请求问题
es6 class类详解
03-28
ES6中的class可以让我们更方便地定义类和...ES6中的class为JavaScript提供了更加完整和规范的面向对象编程模式，支持继承、静态方法、属性等等。使用class可以让我们更方便地定义类和对象，提高代码的可读性和维护性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值