1.请求数据
使用fetch请求,默认get
<button onclick="btn1()">btn1</button>
<script>
function btn1() {
fetch('https://www.fastmock.site/mock/bfa9f3e6ea929ffff80b1d475c04eb21/api/test')
.then(res => {
console.log(res);
return res.json();
}).then(data => {
console.log(data);
});
};
</script>
await版
<button onclick="btn2()">btn1</button>
<script>
async function btn2() {
let res = await fetch('https://www.fastmock.site/mock/bfa9f3e6ea929ffff80b1d475c04eb21/api/test');
console.log(res);
let data =await res.json();
console.log(data);
}
</script>
2.响应头和状态码
function btn1() {
fetch('https://www.fastmock.site1/mock/1bfa9f3e6ea929ffff80b1d475c04eb21/api/test')
.then(res => {
console.log(res);
if (res.ok && status == 200) {
return res.json();
} else {
throw new Error("状态码不是200");
}
})
.then(data => {
console.log(data);
})
//如果浏览器离线或者服务器返回意外的响应,则进入catch6+
.catch(err => {
console.log('err:');
console.log(err);
});
};
3.设置请求参数
async function btn2() {
let url = new URL('http://localhost:5000/test/g2');
url.searchParams.set('a', 3);
url.searchParams.set('str', 'abc');
let res = await fetch(url);
if (!res.ok) {
throw new Error('错误');
}
let data = await res.text();
console.log(data);
}
4.添加头部信息
async function btn1() {
let heard=new Headers();
heard.set('key','value1');
let res = await fetch('http://localhost:5000/test/g1',{headers:heard});
if (!res.ok) {
throw new Error('错误');
}
let data = await res.text();
console.log(data);
}
5.指定请求方式和请求体
async function btn1() {
let res = await fetch('http://localhost:5000/test/p3', {
method: "post",
headers: new Headers({ "Content-Type": "application/json" }),
body: JSON.stringify ({ "age": 18, "name": "tom" })
});
if (!res.ok) {
throw new Error('错误');
}
let data = await res.json();
console.log(data);
}
6.解析响应
7.流式访问响应体
8.上传文件
9.跨域请求
10.中断请求
11.其他请求选项