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

首页 > 博客列表 > JSON的使用以及传统XHR, Fetch, async, await的使用场景

博主信息

博文 14

粉丝 0

访问量 12195

专题推荐

更多>

一、JSON

JSON是一种数据格式，是一种在互联网传输中运用最多的数据交换语言，由于它轻便、灵巧，且能从各种语言中完全独立出来，所以成为目前最理想的数据交换语言

JSON语言采用key/value型数据格式
value是关键字的值，它可以由以下几种数据构成

值	说明
String	字符串
number	数字
object	对象（key:value）
array	数组
true	√
false	×
null	空

jsObj -> jsonStr: js对象[前端] -> json字符串[后端], js对象的序列化

const user = {
      id: 1,
      name: "猪老湿",
      email: "88888@qq.com",
      isMarried: true,
      gender: "male",
      salary: 123456,
};
console.log(JSON.stringify(user, null, 2));

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

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"]
     }
  }
;
console.log(JSON.parse(siteInfo));

二、传统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);

function getUser1(btn) {
    // 1. 创建对象:
    const xhr = new XMLHttpRequest();
    // 2. 响应类型:
    xhr.responseType = "json";
    // 3. 配置参数:
    let url = "http://website.io/users.php";
    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);
}

三、 Fetch API

Fetch语法:

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

function getUser2(btn) {
  // 无GET参数,则返回全部用户,用表格展示
  let url = "http://website.io/users.php";
  fetch(url)
    .then(response => response.json())
    .then(json => {
      console.log(json);
      // 渲染到页面中
      render(json, btn);
    })
    .catch(err => console.log("Fetch Error", err));
}

四、async, await 的使用场景

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

<!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" />
    <title></title>
</head>
<body>
    <button onclick="getUser(this)">查询用户信息 - Fetch</button>
    <script>
        // 异步函数,内部有异步操作
        async function getUser(btn) {
            let url = "http://website.io/users.php";
            url = "http://website.io/users.php?id=3";
            //await: 表示后面是一个异步请求,需要等待结果
            const response = await fetch(url);
            // response响应对象,json():将返回的数据转为json
            const result = await response.json();
            console.log(result);
            // 渲染到页面中
            render(result, btn);
        }
    </script>
    <script src="function.js"></script>
</body>
</html>