博客列表 >fetch,async,await 的用法

fetch,async,await 的用法

一个好人
一个好人原创
2023年04月02日 17:14:46615浏览

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已经淘汰了的说法有点吃惊!感觉挺常见的。

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议