网站首页 > 教程文章 正文
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>
猜你喜欢
- 2024-12-03 Yii::$app->request常用属性和方法
- 2024-12-03 查缺补漏:一文看懂HTTP请求流程，不信你还不会
- 2024-12-03 Mysql写入频繁，怎么破?这是我见过的最清晰的“神操作”
- 2024-12-03 “我将 AWS 的数据传输成本，降低了 99%!”
- 2024-12-03 必备 Python 库:Requests - 轻松完成 HTTP 请求
- 2024-12-03 免费获取韵达快递查询API的使用指南
- 2024-12-03 手撸了一个网络请求工具类，开发速度迅速提升了300%
- 2024-12-03 应用层协议HTTP和HTTPS，一篇文章学会
- 2024-12-03 HTTP客户端连接，选择HttpClient还是OkHttp?
- 2024-12-03 深入理解 HTTP 请求参数和响应参数
- 最近发表
- 标签列表
-
- location.href (44)
- document.ready (36)
- git checkout -b (34)
- 跃点数 (35)
- 阿里云镜像地址 (33)
- qt qmessagebox (36)
- md5 sha1 (32)
- mybatis plus page (35)
- semaphore 使用详解 (32)
- update from 语句 (32)
- vue @scroll (38)
- 堆栈区别 (33)
- 在线子域名爆破 (32)
- 什么是容器 (33)
- sha1 md5 (33)
- navicat导出数据 (34)
- 阿里云acp考试 (33)
- 阿里云 nacos (34)
- redhat官网下载镜像 (36)
- srs服务器 (33)
- pico开发者 (33)
- https的端口号 (34)
- vscode更改主题 (35)
- 阿里云资源池 (34)
- os.path.join (33)