ASCII码 ASCII码

JS的JSON二个API、传统异步、现代异步Fetch及异步中使用 async, await的小结

发布于：2022-02-14 10:27:45  栏目：技术文档

1. 演示JSON的二个API

  • json是通用的,数据交互格式,用于前后端数据通信。
  • json独立于编程语言,本质是一个格式化字符串。
  • json借用了js对象字面量的语法,简洁高效,已替代了传统的xml格式
  • json不是js对象, 但它可以与js对象之间（用函数）相互转换
  • json: 本质就是js对象的序列化, 即js的对象表示格式，只是转为字符串表示例如php后端生成json字符串，前端js转换为对象，实现前后端交换数据
  • json字符串格式：— 所有属性必须使用双引号— 字符类型的值必须使用双引号— 不能有undefined— 最后一个值后不能有逗号
  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>JSON的二个API</title>
  8.   </head>
  9.   <body>
  10.     <script>
  11.       // 定义对象
  12.       const user = {
  13.         id: 001,
  14.         name: "李小龙",
  15.         nationality: "中国",
  16.         gender: "male",
  17.       };
  18.       console.log(user);
  19.       //   显示为对象
  21.       //   将对象转为json字符串
  22.       let jsonUser = JSON.stringify(user);
  23.       console.log(jsonUser);
  24.       //   显示字符串：{"id":1,"name":"李小龙","nationality":"中国"}
  25.       //   第2个参数为数组时，只把相应的属性转为json字符串
  26.       jsonUser = JSON.stringify(user, ["name", "nationality"]);
  27.       console.log(jsonUser);
  28.       //   显示结果：{"name":"李小龙","nationality":"中国"}
  29.       //   第2个参数为回调函数时，传递对象索引和值
  30.       jsonUser = JSON.stringify(user, (key, value) => {
  31.         //   根据属性判断分支
  32.         switch (key) {
  33.           // 根据性别转为中文
  34.           case "gender":
  35.             return value === "male" ? "男" : "女";
  36.           // 不输出国籍
  37.           case "nationality":
  38.             return undefined;
  39.           case "id":
  40.             return undefined;
  41.           // 其他属性都输出
  42.           default:
  43.             return value;
  44.         }
  45.       });
  46.       console.log(jsonUser);
  47.       //   显示字符串：{"name":"李小龙","gender":"男"}
  49.       //   第3个参数：格式化
  50.       jsonUser = JSON.stringify(user, null, 2);
  51.       console.log(jsonUser);
  52.       //   显示结果为分行缩进格式显示对象属性
  53.       jsonUser = JSON.stringify(user, null, "...");
  54.       console.log(jsonUser);
  56.       //   定义json字符串
  57.       const jsonUS_TV = `
  58.       {
  59.           "moveTitle":"时空之轮",
  60.           "years":"2021",
  61.           "country":"美国",
  62.           "language":"英语",
  63.           "category":["动作","冒险","剧情","奇幻"]
  64.       }
  65.       `;
  66.       // 转为js对象
  67.       let classUS_TV = JSON.parse(jsonUS_TV);
  68.       console.log(classUS_TV);
  69.       //   显示结果为对象
  70.       //   使用参数
  71.       classUS_TV = JSON.parse(jsonUS_TV, (key, value) => {
  72.         //   删除years属性
  73.         if (key === "years") {
  74.           delete this[key];
  75.         } else {
  76.           return value;
  77.         }
  78.       });
  79.       console.log(classUS_TV);
  81.       //   显示到页面中
  82.       let html = `
  83.         <h3>美剧推荐</h3>
  84.         <p>片名：${classUS_TV.moveTitle}</p>
  85.         <p>国家：${classUS_TV.country}</p>
  86.         <p>语言：${classUS_TV.language}</p>
  87.         <p>类型：${Object.values(classUS_TV.category)
  88.           .map((value) => `${value}`)
  89.           .join("，")}</p>
  90.     `;
  91.       const div = document.createElement("div");
  92.       div.innerHTML = html;
  93.       document.body.append(div);
  94.     </script>
  95.   </body>
  96. </html>

2. 异步传统方式

  • 创建对象: new XMLHttpRequest();
  • 响应类型: xhr.responseType = “json”;设置为返回数据类型为json
  • 配置参数: xhr.open(“GET”, url, true);
  • 请求回调: xhr.onload = () => console.log(xhr.response);
  • 失败回调: xhr.onerror = () => console.log(“Error”);
  • 发起请求: xhr.send(null);
  • xhr 至少监听2个事件: load,error, 调用2个函数: open,send
  • post请求,需要设置一下请求头与请求的数据,其它与get请求完全相同
  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>异步</title>
  8.   </head>
  9.   <body>
  10.     <button onclick="getUserXHR(this)">查询用户信息--传统方式</button>
  11.   </body>
  12.   <script>
  13.     // 请求链接，没有参数显示所有数据
  14.     let url = "user.php";
  15.     // 有参数显示单条数据
  16.     url = "user.php?id=2";
  18.     // 一、传统异步方式
  19.     function getUserXHR(btn) {
  20.       // 1. 创建异步对象
  21.       const XHR = new XMLHttpRequest();
  22.       // 2. 响应类型为json
  23.       XHR.responseType = "json";
  24.       // 3. 配置参数
  25.       XHR.open("GET", url, true);
  26.       // 4. 请求响应成功结果,onload方法参数为函数，不用参数
  27.       // 返回结果在response对象中
  28.       XHR.onload = () => {
  29.         console.log(XHR.response);
  30.         // 调用自定义函数显示在页面
  31.         render(XHR.response, btn);
  32.       };
  33.       // 5. 请求失败处理
  34.       XHR.onerror = () => console.log("请求错误！");
  35.       // 6. 发起请求
  36.       XHR.send(null);
  37.     }
  38.   </script>
  39.   <script src="function.js"></script>
  40. </html>

3. 异步现代Fetch方式

  • 语法 

    1.   fetch(请求链接)
    2.       .then(参数=>{})    请求成功，参数为回调函数，返回值
    3.       .then(...)        链式调用
    4.       .catch(...)        请求失败，参数为回调函数，错误信息
  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异步</title>
  8.   </head>
  9.   <body>
  10.     <button onclick="getUser(this)">查询用户信息--Fetch方式</button>
  11.   </body>
  12.   <script>
  13.     // 请求链接，没有参数显示所有数据
  14.     let url = "user.php";
  15.     // 有参数显示单条数据
  16.     // url = "user.php?id=1";
  18.     function getUser(btn) {
  19.       fetch(url)
  20.         //   取得返回结果，转为json对象
  21.         .then((res) => res.json())
  22.         // 链式调用，将json对象输出
  23.         .then((js) => {
  24.           console.log(js);
  25.           //   调用自定义函数，在页面中显示
  26.           render(js, btn);
  27.         })
  28.         .catch((err) => console.log("查询错误：", err));
  29.     }
  30.   </script>
  31.   <script src="function.js"></script>
  32. </html>

4. 异步中使用 async, await

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

  • 在异步代码前加await，表示执行异步，要等待结果
  • 函数中有await表示是异步函数，在函数前面加async表示使用 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>async, await</title>
  8.   </head>
  9.   <body>
  10.     <button onclick="getUser(this)">查询用户信息--Fetch方式</button>
  11.   </body>
  12.   <script>
  13.     // 请求链接
  14.     let url = "http://jsonplaceholder.typicode.com/users";
  16.     // 函数中有await异步操作，则函数要用async表示异步函数
  17.     async function getUser(btn) {
  18.       // 定义常量RESPONSE，赋值为响应对象
  19.       // fetch为异步运行，在前面用await表示，要等待响应结果
  20.       const RESPONSE = await fetch(url);
  21.       //   上面对象是json字符串，转为对象。也是异步，要等待转换结果
  22.       const RESULT = await RESPONSE.json();
  23.       //   调用自定义函数，在页面上显示结果
  24.       render(RESULT, btn);
  25.     }
  27.   </script>
  28.   <script src="function.js"></script>
  29. </html>
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行