欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

JSON的使用以及传统XHR, Fetch, async, await的使用场景

程序员文章站 2022-05-16 21:18:16
...

一 、JSON

JSON是一种数据格式，是一种在互联网传输中运用最多的数据交换语言，由于它轻便、灵巧，且能从各种语言中完全独立出来，所以成为目前最理想的数据交换语言
  • JSON语言采用key/value型数据格式
  • value是关键字的值，它可以由以下几种数据构成
值 说明
String 字符串
number 数字
object 对象（key:value）
array 数组
true √
false ×
null 空
  1. jsObj -> jsonStr: js对象[前端] -> json字符串[后端], js对象的序列化
    

  1. const user = {
    2. 

  2.       id: 1,
    3. 

  3.       name: "猪老湿",
    4. 

  4.       email: "88888@qq.com",
    5. 

  5.       isMarried: true,
    6. 

  6.       gender: "male",
    7. 

  7.       salary: 123456,
    8. 

  8. };
    9. 

    10. 

  10. console.log(JSON.stringify(user, null, 2));
    11.

JSON的使用以及传统XHR, Fetch, async, await的使用场景

  1. jsonStr -> jsObj: json字符串[后端] -> js对象[前端]
    

  1. const siteInfo = `
    2. 

  2.    {
    3. 

  3.      "name":"PHP中文网",
    4. 

  4.      "domain":"https://www.php.cn",
    5. 

  5.      "isRecord":true,
    6. 

  6.      "email":"498668472@qq.com",
    7. 

  7.      "address":"合肥市政务新区蔚蓝商务港",
    8. 

  8.      "category":["视频","文章","资源"],
    9. 

  9.      "lesson": {
    10. 

  10.         "name": "第18期Web全栈线上培训班",
    11. 

  11.         "price": 4800,
    12. 

  12.          "content": ["JavaScript", "PHP", "ThinkPHP"]
    13. 

  13.      }
    14. 

  14.   }
    15. 

  15. ;
    16. 

    17. 

  17. console.log(JSON.parse(siteInfo));
    18.

JSON的使用以及传统XHR, Fetch, async, await的使用场景

二 、传统XHR

  • 创建对象: new XMLHttpRequest();
  • 响应类型: xhr.responseType = “json”;
  • 配置参数: xhr.open(“GET”, url, true);
  • 请求回调: xhr.onload = () => console.log(xhr.response);
  • 失败回调: xhr.onerror = () => console.log(“Error”);
  • 发起请求: xhr.send(null);
    

  1. function getUser1(btn) {
    2. 

  2.     // 1. 创建对象:
    3. 

  3.     const xhr = new XMLHttpRequest();
    4. 

  4.     // 2. 响应类型:
    5. 

  5.     xhr.responseType = "json";
    6. 

  6.     // 3. 配置参数:
    7. 

  7.     let url = "http://website.io/users.php";
    8. 

  8.     xhr.open("GET", url, true);
    9. 

  9.     // 4. 请求回调:
    10. 

  10.     xhr.onload = () => {
    11. 

  11.         console.log(xhr.response);
    12. 

  12.         // 渲染到页面中
    13. 

  13.         render(xhr.response, btn);
    14. 

  14.     };
    15. 

  15.     // 5. 失败回调:
    16. 

  16.     xhr.onerror = () => console.log("Error");
    17. 

  17.     // 6. 发起请求:
    18. 

  18.     xhr.send(null);
    19. 

  19. }
    20.

三 、 Fetch API

Fetch语法:

fetch(…)
.then(…)
.then(…)
.catch(…)

    

  1. function getUser2(btn) {
    2. 

  2.   // 无GET参数,则返回全部用户,用表格展示
    3. 

  3.   let url = "http://website.io/users.php";
    4. 

  4.   fetch(url)
    5. 

  5.     .then(response => response.json())
    6. 

  6.     .then(json => {
    7. 

  7.       console.log(json);
    8. 

  8.       // 渲染到页面中
    9. 

  9.       render(json, btn);
    10. 

  10.     })
    11. 

  11.     .catch(err => console.log("Fetch Error", err));
    12. 

  12. }
    13.

四、async, await 的使用场景

ECMA2017, async, await, 来简化了fetch , 实现同步的方式来编写异步代码
    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    3. 

    4. 

  4. <head>
    5. 

  5.     <meta charset="UTF-8" />
    6. 

  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    7. 

  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    8. 

  8.     <title></title>
    9. 

  9. </head>
    10. 

    11. 

  11. <body>
    12. 

  12.     <button onclick="getUser(this)">查询用户信息 - Fetch</button>
    13. 

    14. 

  14.     <script>
    15. 

  15.         // 异步函数,内部有异步操作
    16. 

  16.         async function getUser(btn) {
    17. 

  17.             let url = "http://website.io/users.php";
    18. 

  18.             url = "http://website.io/users.php?id=3";
    19. 

  19.             //await: 表示后面是一个异步请求,需要等待结果
    20. 

  20.             const response = await fetch(url);
    21. 

  21.             // response响应对象,json():将返回的数据转为json
    22. 

  22.             const result = await response.json();
    23. 

    24. 

  24.             console.log(result);
    25. 

    26. 

  26.             // 渲染到页面中
    27. 

  27.             render(result, btn);
    28. 

  28.         }
    29. 

  29.     </script>
    30. 

  30.     <script src="function.js"></script>
    31. 

  31. </body>
    32. 

    33. 

  33. </html>
    34.

上一篇： 学绘画该怎么上色？电脑绘画上色技巧！

下一篇： 元素样式/选择器及权重

推荐阅读