Fetch-Api基本用法和学习和理解

Fetch

Fetch 是基于 Promise 语法结构,而且它的设计足够低阶,这表示它可以在实际需求中进行更多的弹性设计

Fetch API 规范明确了用户代理获取资源的语义。原生支持 Promise1,调用方便,符合语义化。可配合使用 ES2016 中的 async / await 语法,更加优雅。

一个基本的 fetch 请求

这里我们通过网络获取一个 JSON 文件并将其打印到控制台。

最简单的用法是只提供一个参数用来指明想 fetch() 到的资源路径

然后返回一个包含响应结果的promise(一个 Response对象)

fetch('https://api.qiaobug.com/')
.then(function(response) {
//返回到是一个对象
return response.json();
})
.then(function(myJson) {
//这里才是打印返回结果
console.log(myJson);
});

Request 对象

Headers 对象

允许您对HTTP请求和响应头执行各种操作。

这些操作包括检索,设置,添加和删除。

添加

append()方法可以追加一个新值到已存在的headers上,或者新增一个原本不存在的header。

myHeaders.append(name,value);

name:要追加给Headers对象的HTTP header名称.

value:要追加给Headers对象的HTTP header值.

删除

delete() 方法可以从Headers对象中删除指定header.

myHeaders.delete(name);

name:需删除的HTTP header名称.

示例

let myHeaders = new Headers();

myHeaders.append('Content-Type', 'text/xml');

myHeaders.get('Content-Type');
// should return 'text/xml'

也可以直接写在内部

myHeaders = new Headers({
"Content-Type": "text/plain",
"Content-Length": content.length.toString(),
"X-Custom-Header": "ProcessThisImmediately",
});

Response对象

呈现了对一次请求的响应数据。

Response.text()

读取 response,并以文本形式返回 response

response.text().then(function (text) {

});

Response.json()

接收一个 Response 流,并将其读取完成

它返回一个 Promise,Promise 的解析 resolve 结果是将文本体解析为 JSON

response.json().then(data => {

});

返回一个被解析为JSON格式的promise对象

基本用法

fetch("/test").then(res=>{
return res.json();
}).then(res=>{
console.log(res);
}).catch(err=>{
console.log(err);
})

Post请求示例

要创建一个 POST 请求,或者其他方法的请求,我们需要使用 fetch 选项:

JSON 形式是最常用的。

例如,下面这段代码以 JSON 形式发送 user 对象:

let user = {
name: 'John',
surname: 'Smith'
};

let response = await fetch('/article/fetch/post/user', {
method: 'POST',
headers: {
'Content-Type': 'application/json;charset=utf-8'
},
body: JSON.stringify(user)
});

let result = await response.json();
alert(result.message);

示例2

fetch("/getData",{
//请求方式
method:"post",
// 请求参数为Json
body:JSON.stringify({name:"zhangsan",age:20}),
headers:{
//设置头部
"content-type":"application/json",
}
}).then(res=>{
return res.json();
}).then(res=>{
console.log(res);
})

请注意,如果请求的 body 是字符串,则 Content-Type 会默认设置为 text/plain;charset=UTF-8

但是,当我们要发送 JSON 时,我们会使用 headers 选项来发送 application/json,这是 JSON 编码的数据的正确的 Content-Type

上一篇

React基础学习与JSX的使用与了解