fetch的基本用法、请求参数及响应结果
响应 用法 参数 基本 请求 结果 fetch
2023-09-11 14:21:26 时间
前言
fetch是基于Promise来实现的,Promise用法:Promise用法及基于Promise处理ajax请求
一、fetch
1、基本特性
更加简单的数据获取方式,功能更强大,更灵活,可以看作是xhr的升级版
官方:https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
xhr相关知识点:
2、语法
fetch(url).then(fn2)
.then(fn3)
...
.catch(fn)
3、基本用法
text()方法
属于fetchAPI的一部分,它返回一个Promise实例对象
,需要return
用途:用于获取后台返回的数据
fetch('/abc').then(data =>{
return data.text(); // text()返回的是一个Promise对象
}).then(ret =>{
//这里得到的才是最终的数据
console.log(ret)
});
二、fetch请求参数
1、常用的配置项
配置项 | 类型 | 说明 |
---|---|---|
method | String | HTTP请求方法,默认为get(get、post、put、delete) |
body | String | HTTP请求参数 |
headers | Object | HTTP请求头,默认为{} |
2、get请求传参
put类似
fetch('/abc?id=123',{
method:'get'
}).then(data=>{
return data.text()
}).then(ret=>{
// 这里得到的才是真正的数据
console.log(ret);
})
3、post请求传参
delete类似
必须写请求头
fetch("/abc", {
method: "POST",
body: "uname=list&pwd=123",
headers:{
'Content-Type','application/x-www-form-urlencoded';
}
})
.then((data) => {
return data.text();
})
.then((ret) => {
// 这里得到的才是真正的数据
console.log(ret);
});
三、fetch响应结果
响应数据格式
名称 | 说明 |
---|---|
text() | 将返回体处理成字符串类型 |
json() | 返回结果和JSON.parse(responseText)一样 |
fetch("/abc/json")
.then((data) => {
// return data.text();
return data.json()
})
.then((ret) => {
// 这里得到的才是真正的数据
console.log(ret);
});
相关文章
- 解决jmeter返回响应乱码
- laravel自定义接口错误响应格式
- 如何在jmeter中把响应中的数据提取出来并引用
- [转]响应式WEB设计学习(1)—判断屏幕尺寸及百分比的使用
- Vue —— 创建响应式对象的四种方式对比(reactive、ref、toRef、toRefs)
- 《高性能响应式Web开发实战》一2.2 CSS像素
- 面试官:说说Vue响应式原理
- X-Frame-Options 响应头
- servlet 服务器HTTP响应头设置示例(response用法)
- 响应式布局之网站头部导航
- 蚂蚁金服安全应急响应中心上线
- WEB前端大作业-蓝色金融服务响应式网页模板.md
- 响应式网页设计简单入门
- 使用Httpwatch分析响应时间--转