JS对象-JSON转换，XHR 实例演示，Fetch API 与 async, await 实例演示

程序员文章站 2022-03-27 08:28:14

...

JSON 基础知识

json 是通用的,轻量化的 “数据交互格式”,用于 “前后端数据通信”
json 独立于编程语言,本质是一个格式化字符串
json 借用了 js 对象字面量的语法,简洁高效,已替代了传统的 xml 格式
json 不是 js 对象, 但它可以与 js 对象之间相互转换
json 数据类型: 不支持 undefined ,没意义的数据类型
json: 本质就是 js 对象的序列化, 字符串表示
js 对象[前端] -> json 字符串[后端], js 对象的序列化

JSON.stringify: obj -> json, JS 对象转为 json 字符串


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JSON基础知识</title>
  </head>
  <body></body>
  <script>
    // JS对象
    const staff = {
      id: 1,
      name: "DASHU",
      email: "help_10086@foxmail.com",
      isMarried: "0",
      gender: "0",
      bophan: "HR-Dept",
      congviec: "HR",
      salary: 20000000,
      /* toJSON() {
        // 只返回 name,email
          return `name:${this.name}, email=${this.email}`;
        }, */
    };

    // console.log(staff);
    // console.log(typeof staff);

    // 1、序列化json: JSON.stringify
    let jsonStr = JSON.stringify(staff);
    // 第二个参数: array, callback
    // array
    jsonStr = JSON.stringify(staff, ["name", "email"]);
    // callback,做一些操作
    jsonStr = JSON.stringify(staff, (key, value) => {
      switch (key) {
        case "gender":
          return value === "0" ? "男" : "女";
        case "salary":
          return undefined;
        default:
          return value;
      }
    });

    // 第三个参数: 格式化
    jsonStr = JSON.stringify(staff, null, 2);
    jsonStr = JSON.stringify(staff, null, "**");
    console.log(jsonStr);
    // console.log(typeof jsonStr);

    // JSON字符串
    // verify: https://www.bejson.com/

    // 1. 所有属性必须使用双引号
    // 2. 字符类型的值必须使用双引号
    // 3. 不能有undefined
    // 4. 最后一个值后不能有逗号
    const siteInfo = `
        {
          "name":"PHP中文网",
          "domain":"https://www.php.cn",
          "isRecord":true,
          "email":"498668472@qq.com",
          "address":"合肥市政务新区蔚蓝商务港",
          "category":["视频","文章","资源"],
          "lesson": {
            "name": "第18期Web全栈线上培训班",
            "price": 4800,
            "content": ["JavaScript", "PHP", "ThinkPHP"]
          }
        }
      `;
  </script>
</html>

JSON.parse: json->obj, json 字符串转为 JS 对象


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JSON基础知识</title>
  </head>
  <body></body>
  <script>
    // JSON字符串
    // verify: https://www.bejson.com/

    // 1. 所有属性必须使用双引号
    // 2. 字符类型的值必须使用双引号
    // 3. 不能有undefined
    // 4. 最后一个值后不能有逗号
    const siteInfo = `
        {
          "name":"PHP中文网",
          "domain":"https://www.php.cn",
          "isRecord":true,
          "email":"498668472@qq.com",
          "address":"合肥市政务新区蔚蓝商务港",
          "category":["视频","文章","资源"],
          "lesson": {
            "name": "第18期Web全栈线上培训班",
            "price": 4800,
            "content": ["JavaScript", "PHP", "ThinkPHP"]
          }
        }
      `;

    // 2、jsonStr -> jsObj: json字符串[后端] -> js对象[前端]
    // JSON.parse

    // 以前用eval
    let site = eval("(" + siteInfo + ")");
    console.log(site, typeof site);

    site = JSON.parse(siteInfo);
    site = JSON.parse(siteInfo, function (key, value) {
      // console.log(key, "=>", value);
      if (key === "email" || key === "address") {
        delete this[key];
      } else {
        return value;
      }
    });
    console.log(site);

    // js obj 渲染到页面中
    let html = `
        <li>网站名称: ${site.name}</li>
        <li>网站域名: ${site.domain.slice(8)}</li>
        <li>是否备案: ${site.isRecord ? "已备案" : "未备案"}</li>
        <li>服务内容:
          <ul>
            <li style="color:red">1. arry.map()</li>
            ${site.category.map((cate) => `<li>${cate}</li>`).join("")}
            <li style="color:red">2. arry.reduce()</li>
            ${site.category.reduce((acc, cur) => `${acc}</li><li>${cur}`, "")}
          </ul>
        </li>
        <li>课程信息:
          <ul>
            <li style="color:red"> 1: 根据键名获取值</li>
             ${Object.keys(site.lesson)
               .map((key) => `<li>${site.lesson[key]}</li>`)
               .join("")}

               <li style="color: red"> 2: 直接获取值</li>
             ${Object.values(site.lesson)
               .map((less) => `<li>${less}</li>`)
               .join("")}
          </ul>
        </li>
      `;

    const ul = document.createElement("ul");
    ul.innerHTML = html;
    document.body.append(ul);
  </script>
</html>

[http://help10086.cn/0110/demo1.html]

传统 XHR 实例演示

1. 创建对象: new XMLHttpRequest();
1. 响应类型: xhr.responseType = “json”;
1. 配置参数: xhr.open(“GET”, url, true);
1. 请求回调: xhr.onload = () => console.log(xhr.response);
1. 失败回调: xhr.onerror = () => console.log(“Error”);
1. 发起请求: xhr.send(null);-
xhr 至少监听 2 个事件: load,error, 调用 2 个函数: open,send
post 请求,需要设置一下请求头与请求的数据,其它与 get 请求完全相同


<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="funcShow.js"></script>
    <title>ajax-xhr</title>
  </head>
  <body style="display: grid; gap: 1em">
    <button style="width:166px;" onclick="getStaff1(this)">
      获取员工信息 - XHR
    </button>
    <script>
      // 1. 传统 XHR,是一个对象
      /**
       * 1. 创建对象: new XMLHttpRequest();
       * 2. 响应类型: xhr.responseType = "json";
       * 3. 配置参数: xhr.open("GET", url, true);
       * 4. 请求回调: xhr.onload = () => console.log(xhr.response);
       * 5. 失败回调: xhr.onerror = () => console.log("Error");
       * 6. 发起请求: xhr.send(null);
       *
       * xhr 至少监听2个事件: load,error, 调用2个函数: open,send
       * post请求,需要设置一下请求头与请求的数据,其它与get请求完全相同
       */

      function getStaff1(btn) {
        // 1. 创建对象:
        const xhr = new XMLHttpRequest();
        // 2. 响应类型:
        xhr.responseType = "json";
        // 3. 配置参数:
        let url = "http://help10086.cn/0110/staffs.php";
        // url = "http://help10086.cn/0110/staffs.php?msnv=900101";
        xhr.open("GET", url, true);
        // 4. 请求回调:
        xhr.onload = () => {
          console.log(xhr.response);
          // 渲染到页面中
          render(xhr.response, btn);
        };
        // 5. 失败回调:
        xhr.onerror = () => console.log("Error");
        // 6. 发起请求:
        xhr.send(null);
      }
    </script>
  </body>
</html>

[http://help10086.cn/0110/demo2.html]

Fetch API 与 async, await 实例演示

语法:
fetch(…)
.then(…)
.then(…)
.catch(…)


<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="funcShow.js"></script>
    <title>Fetch API</title>
  </head>
  <body>
    <button onclick="getStaff(this)">获取用户信息 - Fetch</button>

    <script>
      // 实际开发中, 通常不会直接去用Promise,用fetch
      // axios : 基于 xhr
      // fetch : 基于 promise, 返回一个Promise对象

      // console.log(fetch());

      /* fetch("https://jsonplaceholder.typicode.com/users")
        .then(response => response.json())
        .then(json => console.log(json)); */

      fetch("http://help10086.cn/0110/staffs.php")
        .then((response) => response.json())
        .then((json) => console.log(json));

      // 同域: 协议相同, 域名相同,端口相同,否则就是跨域请求

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

      // 异步函数,内部有异步操作
      async function getStaff(btn) {
        let url = "http://help10086.cn/0110/staffs.php";
        // url = "http://help10086.cn/0110/staffs.php?msnv=900101";
        //await: 表示后面是一个异步请求,需要等待结果
        const response = await fetch(url);
        // response响应对象,json():将返回的数据转为json
        const result = await response.json();

        console.log(result);

        // 渲染到页面中
        render(result, btn);
      }
    </script>
  </body>
</html>

[http://help10086.cn/0110/demo6.html]

上一篇： js实现checkbox全选、不选与反选的方法_javascript技巧

下一篇：小米新机支持67W快充：可惜国内不卖