【Fetch】fetch的使用
程序员文章站
2022-03-02 15:39:07
...
1.使用fetch进行请求
fetch请求是基于promise的HTTP库,整个配置和请求很简单,来看MDN上提供的代码:
fetch('http://example.com/movies.json')
.then(function(response) {
console.log(response);
return response.json();
})
.then(function(myJson) {
console.log(myJson);
});
// console.log(response) 输出的内容
{
body: ReadableStream
bodyUsed: false
headers: Headers
ok : true
redirected : false
status : 200
statusText : "OK"
type : "cors"
url : "http://some-website.com/some-url"
__proto__ : Response
}
- fetch请求返回的是一个promise
- 打印response,真正的数据存储在body中,字面意思是可读流,需要一个方法转成我们想要的数据
- response.json()就是转化的方法,它返回的也是一个promise
- myJson是我们需要的json数据
2.fetch请求配置
fetch(url, options)
接收两个参数,第一个参数为请求的url,第二个参数为请求的options配置。
options为一个对象,来看下options接收的参数
let data = { name: 'Mike' };
{
method: 'post',
headers: {
''Content-Type': 'application/json;charset=utf-8''
},
body: data
}
3.fetch响应配置
无论请求响应返回的状态码是多少,都会被fetch resolve掉,除非出现网络异常或者请求中断的情况。一般情况下,我们需要配合返回的响应状态码来完成业务。
fetch('some-url')
.then(response => {
if (response.status == 200) { // 这里根据状态码添加逻辑
return response.json()
} else {
return Promise.reject({ // 将异常的状态码如401、500等返回一个promise或者抛出异常
status: response.status,
statusText: response.statusText
})
}
})
.catch(error => {
if (error.status === 404) {
// do something about 404 // 这里可以根据情况来跳转路由页面
}
})