一、async 和 await

async 和 await 两种语法结合可以让异步代码像同步代码一样。

1. async 函数

async 函数的返回结果是一个 promise 对象；
promise 对象的结果由 async 函数执行的返回值决定。

async function fn() {// return;  // 返回非 promise 对象就是成功// throw new Error('出错啦');  // 抛出错误，返回的结果是失败// 返回 Promise 对象，里面对象的状态决定 async 函数的状态return new Promise((resolve, reject) => {// resolve('成功');reject('失败');})
}

2. await 表达式

await 必须写在 async 函数中，async 可以没有 await
await 右侧的表达式一般为 Promise 对象
await 返回的是 Promise 成功的值
await 的 Promise 失败了，就会抛出异常，需要通过 try...catch 捕获处理。

const p = new Promise((resolve, reject) => {// resolve('用户数据'); reject('失败啦');
})async function fn() {try {let result = await p;console.log(result);} catch (e) {console.log(e);}
}
fn();

3. 实例

读取文件

const fs = require('fs');
function read_1() {return new Promise((resolve, reject) => {fs.readFile('./1.txt', (err, data) => {if (err) reject('1.txt获取失败');resolve(data);})})
}
function read_2() {return new Promise((resolve, reject) => {fs.readFile('./2.txt', (err, data) => {if (err) reject('2.txt获取失败');resolve(data);})})
}
function read_3() {return new Promise((resolve, reject) => {fs.readFile('./3.txt', (err, data) => {if (err) reject('3.txt获取失败');resolve(data);})})
}
async function main() {try {let result1 = await read_1();let result2 = await read_2();let result3 = await read_3();console.log(result1.toString());console.log(result2.toString());console.log(result3.toString());} catch (e) {console.log(e);}
}
main()

封装 Ajax

function sendAJAX(url) {return new Promise((resolve, reject) => {const x = new XMLHttpRequest();x.open('GET', url);x.send();x.onreadystatechange = function() {if (x.readyState === 4) {if (x.status >= 200 && x.status < 300) {resolve(x.response)} else {reject(x.status)}}}})
}
async function main() {let result = await sendAJAX('http://127.0.0.1:8000/jsonp');let result2 = await sendAJAX('http://127.0.0.1:8000/promise');console.log(result);console.log(result2);
}
main();

二、对象方法扩展

Object.values() 方法返回一个给定对象的所有可枚举属性值的数组。
Object.entries() 方法返回一个给定对象自身可遍历属性 [key, value] 的数组。
Object.getOwnPropertyDescriptors() 方法返回指定对象所有自身属性的描述对象。

const config = {user: 'admin',port: [80, 443, 3306]
}// 获取键，数组类型  [ 'user', 'port' ]
console.log(Object.keys(config));
// 获取值，数组类型  [ 'admin', [ 80, 443, 3306 ] ]
console.log(Object.values(config));
// 获取键值对，数组类型  [ [ 'user', 'admin' ], [ 'port', [ 80, 443, 3306 ] ] ]
console.log(Object.entries(config));
// 返回对象属性的描述对象
console.log(Object.getOwnPropertyDescriptors(config));

JavaScript——ES8新特性相关推荐

JavaScript ES2021 新特性解析
JavaScript ES2021 新特性解析新特性列表 String.prototype.replaceAll Promise.any 逻辑运算符和赋值表达式数值分隔符 Intl.ListFor ...
ES7/ES8新特性总结
es7新特性 ES2016添加了两个小的特性来说明标准化过程: 数组includes()方法,用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回true,否则返回false. a ** b ...
ES6-Promise简介、ES7 新特性及ES8新特性-async和await
目录 ES6-Promise Promise简介 Promise.prototype.then方法 Promise.prototype.catch方法 ES7 新特性 Array.prototype. ...
JavaScript——ES10新特性
JavaScript--ES10新特性一.对象方法扩展二.字符串扩展方法三.数组扩展方法四.Symbol 扩展一.对象方法扩展 Object.fromEntries() 方法用来创建对象,但 ...
ES6/ES7/ES8新特性汇总
ES6起各个版本的新特性汇总 ES全称ECMAScript,ECMAScript是ECMA制定的标准化脚本语言.目前JavaScript使用的ECMAScript版本为ECMA-417.关于ECMA的 ...
ES7、ES8新特性
概述 JavaScript,作为一门处于高速发展期的开发语言,正在变的越来越完善.稳定.我们必须拥抱这些变化,并且我们需要把ES8加入到我们的技术栈中. ECMAScript 是标准化的 JavaSc ...
javaScript ES6-ES11新特性总结
ES6-ES11新特性知识点一.ES6 1.查看ES6兼容性 http://kangax.github.io/compat-table/es6/ 可查看兼容性 2.let定义变量快速入门: //特 ...
JavaScript——ES6新特性
默认参数 var a = function(m,n){var m = m || 50;var n = n || 'es';//... } 变为直接放在函数签名中,因为如果参数为0,在JavaScrip ...
怎么真正入行Web前端行业？JavaScript五大新特性是什么？
怎么真正入行Web前端行业?JS五大新特性是什么?JavaScript是Web开发者必学的三种语言之一,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言.随着互联网的更迭以及技术的革新,Jav ...

JavaScript——ES8新特性

ES8新特性

一、async 和 await

1. async 函数

2. await 表达式

3. 实例

二、对象方法扩展

JavaScript——ES8新特性相关推荐

最新文章

热门文章