JavaScript
JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlex脚本加解密web2.0XML/RSS网页编辑器相关技巧安全相关网页播放器DartVue.js

js fetch异步请求使用实例详解

发布时间：2022-04-16 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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异步请求使用内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典！

您可能感兴趣的文章:

脚本宝典总结

以上是脚本宝典为你收集整理的js fetch异步请求使用实例详解全部内容，希望文章能够帮你解决js fetch异步请求使用实例详解所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：jsjs
猜你在找的JavaScript相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新JavaScript教程
热门JavaScript教程