js fetch异步请求使用实例详解
认识异步
首先我们得明白请求是一个异步的过程。
因为请求需要时间向服务器发送请求和接收请求结果。
我们得要等待请求完成然后执行请求完成后的回调，来对接收到的请求结果做处理。
fetch(url)
为了方便学习，我们借用一下uni-app教程的api接口。
const url = 'https://unidemo.dcloud.net.cn/api/news'
我们需要知道fetch是基于Promise设计的，如果不了解推荐先学习一下es6的Promise。
fetch(url)可以直接发送get请求，而且本身是个Promise。
既然是Promise，那么就可以.then回调，我们试试。
fetch(url).then(res => {
console.log(res)
})
它返回的是什么呢？是一个response。
response是它封装好的一个对象，里面返回了请求的一些参数。
比较有用的例如status，告诉你请求的状态码是200，说明发送请求成功了。
然后我们既然发送了get请求，我们最关心的肯定是请求到的数据在哪里呢？
response.json()
别急，点开Response的Prototype原型，会发现有一个json方法。
直接告诉你这个方法也返回一个Promise。
那我们就可以将这个promise继续返回进行下一步回调。
在下一步里输出一下结果看看是什么东西。
fetch(url).then(response => {
return response.json()
}).then(res => {
console.log(res)
})
原来我们要得到的数据在这里。
结合async和await
上面虽然我们已经可以使用fetch来执行回调来进行请求了，但是使用回调还是显得代码不够优雅。
不过如果你知道与异步相关的关键字async与其中的await，就有可以替代的编写方式了。
给函数添加async之后函数就会变成异步函数，其中可以使用await使代码对异步操作Promise进行等待，把回调结果返回，有一丝把异步变同步的意味。
const fetchAPI = async () => {
const response = await fetch(url)
const data = await response.json()
console.log(data)
}
fetchAPI()
异常处理
而且我们可以在第一步response中的状态码来判断能否正常进行下一步。
const fetchAPI = async () => {
const response = await fetch(url)
if(response.status===200){
const data = await response.json()
console.log(data)
}else{
console.log('请求异常')
}
}
fetchAPI()
然后为了更严谨的考虑一些意外状况，再套上异常捕获try-catch。
const fetchAPI = async () => {
try {
const response = await fetch(url)
if (response.status === 200) {
const data = await response.json()
console.log(data)
} else {
console.log('请求异常')
}
} catch (err) {
console.log(err)
}
}
fetchAPI()
post请求
fetch的第二个入参是个对象，就是请求的配置参数。
请求方法可以设置post，还可以设置请求头还有post的入参。
fetch(url, {
method: "POST",
headers: {
'Content-Type': 'application/json',
...
},
body: JSON.stringify({
'key': value,
...
})
})
总结
到此这篇关于js fetch异步请求使用的文章就介绍到这了,更多相关js fetch异步请求使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了小程序modal弹窗关闭默认会执行cancel方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-10-10
可能在大家使用JavaScript效果时，会碰到在各个浏览器中页面的显示效果不同，甚至报错，这就是代码的兼容性问题。本文就是主要介绍JavaScript的兼容性与调试技巧，希望对大家有所帮助2016-11-11
这篇文章主要为大家详细介绍了JavaScript+canvas实现框内跳动小球，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要给大家介绍了关于JavaScript数组之展开运算符的相关资料,你可以通过展开操作符(Spread operator)扩展一个数组对象和字符串,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-12-12
这篇文章主要为大家详细介绍了javascript实现动态时钟的启动和停止文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
提交按钮的name＝''submit''引起的js失效问题及原因
这篇文章主要介绍了提交按钮的name＝'submit'引起的js失效问题及原因,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了js多个异步请求 按顺序执行next实现解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
这篇文章主要介绍了使用webpack构建应用的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
这篇文章主要为大家详细介绍了JavaScript中内建对象的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-11-11
这篇文章主要介绍了ES6 迭代器与可迭代对象的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
最新评论