Blogger Information
Blog 26
fans 0
comment 1
visits 10488
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
实例演示 fetch / async / await 的使用场景
P粉751989631
Original
574 people have browsed it

实例演示 fetch / async / await 的使用场景

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>fetch/async/await</title>
  8. </head>
  9. <body>
  10. <script>
  11. fetch("https://jsonplaceholder.typicode.com/todos/5")
  12. .then(function (response) {
  13. return response.json();
  14. })
  15. .then(function (json) {
  16. console.log(json);
  17. });
  18. /**
  19. * 1. fetch(url): promise
  20. * 2. then: 调用响应对象的方法生成JSON数据(response.json())
  21. * 3. then: 拿到第二步的响应数据JSON,执行相关操作,例如 DOM
  22. */
  23. /**
  24. * 1. fetch(url): promise
  25. * 2. then: (response)=>response.json()
  26. * 3. then: (json)=>console.log(json)
  27. */
  28. // function 前添加 async , 转为异步函数
  29. async function getUser() {
  30. let url = "http://site.io/data.php?id=1";
  31. // 1. 等待结果再进行下一步操作,返回响应对象
  32. const response = await fetch(url);
  33. // 2. 将响应结果,转为json, json()
  34. const result = await response.json();
  35. console.log(result);
  36. }
  37. </script>
  38. </body>
  39. </html>
Correcting teacher:PHPzPHPz

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post