JSON的使用以及传统XHR, Fetch, async, await的使用场景
程序员文章站
2022-05-25 09:09:19
...
一 、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():将返回的数据转为jsonconst result = await response.json();console.log(result);// 渲染到页面中render(result, btn);}</script><script src="function.js"></script></body></html>
上一篇： php二分查找二种实现示例_PHP