登录  /  注册
博主信息
博文 38
粉丝 0
评论 0
访问量 28664
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
fetch,async,await 的用法
一个好人
原创
1124人浏览过

fetch请求:

  1. function getData(ele){
  2. const url = 'https://jsonplaceholder.typicode.com/todos/20'
  3. fetch(url).then(res => res.json()).then(json => ele.insertAdjacentHTML('afterend', `<li>${json.title}</li>`)).catch(err => console.log(err))

可以获得并显示请求结果:

  1. ullam nobis libero sapiente ad optio sint

async-await请求:

  1. async function getData(ele){
  2. const url = 'https://jsonplaceholder.typicode.com/todos/'
  3. try{
  4. const response = await fetch(url)
  5. const result = await response.json()
  6. for(let i=0; i<10; i++){ele.insertAdjacentHTML('afterend', `<li>${result[i].title}</li>`)
  7. }
  8. } catch {
  9. console.error('请求失败');
  10. }
  11. }

添加for循环,请求并显示10条记录:

  1. illo est ratione doloremque quia maiores aut
  2. molestiae perspiciatis ipsa
  3. quo adipisci enim quam ut ab
  4. illo expedita consequatur quia in
  5. qui ullam ratione quibusdam voluptatem quia omnis
  6. laboriosam mollitia et enim quasi adipisci quia provident illum
  7. et porro tempora
  8. fugiat veniam minus
  9. quis ut nam facilis et officia qui
  10. delectus aut autem

总结:

跨域的概念有点陌生,按视频练了一遍,踩了好多坑;异步请求用的比较多,通过添加循环可以获得多条记录,对Ajax已经淘汰了的说法有点吃惊!感觉挺常见的。

批改老师:PHPzPHPz

批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学