Community Learn Tools Library Leisure
search
English
Home > List of blog posts > JSON的使用以及传统XHR, Fetch, async, await的使用场景
Blogger Information
Blog 14
fans 0
comment 0
visits 8288
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
JSON的使用以及传统XHR, Fetch, async, await的使用场景
#三生
Original
934 people have browsed it

一 、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.       id: 1,
  3.       name: "猪老湿",
  4.       email: "88888@qq.com",
  5.       isMarried: true,
  6.       gender: "male",
  7.       salary: 123456,
  8. };
  10. console.log(JSON.stringify(user, null, 2));

  1. jsonStr -> jsObj: json字符串[后端] -> js对象[前端]
  1. const siteInfo = `
  2.    {
  3.      "name":"PHP中文网",
  4.      "domain":"https://www.php.cn",
  5.      "isRecord":true,
  6.      "email":"498668472@qq.com",
  7.      "address":"合肥市政务新区蔚蓝商务港",
  8.      "category":["视频","文章","资源"],
  9.      "lesson": {
  10.         "name": "第18期Web全栈线上培训班",
  11.         "price": 4800,
  12.          "content": ["JavaScript", "PHP", "ThinkPHP"]
  13.      }
  14.   }
  15. ;
  17. 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);
  1. function getUser1(btn) {
  2.     // 1. 创建对象:
  3.     const xhr = new XMLHttpRequest();
  4.     // 2. 响应类型:
  5.     xhr.responseType = "json";
  6.     // 3. 配置参数:
  7.     let url = "http://website.io/users.php";
  8.     xhr.open("GET", url, true);
  9.     // 4. 请求回调:
  10.     xhr.onload = () => {
  11.         console.log(xhr.response);
  12.         // 渲染到页面中
  13.         render(xhr.response, btn);
  14.     };
  15.     // 5. 失败回调:
  16.     xhr.onerror = () => console.log("Error");
  17.     // 6. 发起请求:
  18.     xhr.send(null);
  19. }

三 、 Fetch API

Fetch语法:

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

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

四、async, await 的使用场景

ECMA2017, async, await, 来简化了fetch , 实现同步的方式来编写异步代码
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title></title>
  9. </head>
  11. <body>
  12.     <button onclick="getUser(this)">查询用户信息 - Fetch</button>
  14.     <script>
  15.         // 异步函数,内部有异步操作
  16.         async function getUser(btn) {
  17.             let url = "http://website.io/users.php";
  18.             url = "http://website.io/users.php?id=3";
  19.             //await: 表示后面是一个异步请求,需要等待结果
  20.             const response = await fetch(url);
  21.             // response响应对象,json():将返回的数据转为json
  22.             const result = await response.json();
  24.             console.log(result);
  26.             // 渲染到页面中
  27.             render(result, btn);
  28.         }
  29.     </script>
  30.     <script src="function.js"></script>
  31. </body>
  33. </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