ES8语法特性 async await values entries getOwnPropertyDescriptor

最新推荐文章于 2023-05-30 20:55:07 发布

sharp_wu

最新推荐文章于 2023-05-30 20:55:07 发布

阅读量130

点赞数

分类专栏： JavaScript 文章标签： js 前端 javascript

本文链接：https://blog.csdn.net/qq_38232003/article/details/110437071

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

ES8

async await

为了解决异步编程，async await 结合使用是异步代码和同步代码一样

生成器函数
Promise函数
async await

async函数

async 函数的返回值为 Promise对象（即使返回的是字符串）只要返回的不是一个Promise对象，结果都为成功的Promise对象，返回的是Promise对象，结果为Promise对象返回的结果（成功或失败）。

Promise对象的结果由 async 函数执行的返回值决定

1.return的不是一个Promise对象（任意字符、空、数值等），async 函数结果为成功的Promise对象

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const fn = async () => {
        return 'wf';
      };
      console.log(fn());
    </script>
  </body>
</html>

在这里插入图片描述
2.抛出错误，sync 函数返回的是一个失败的Promise对象

      const fn = async () => {
        // return 'wf';
        throw new Error('error');
      };
      console.log(fn());

在这里插入图片描述
3.return的是一个Promise对象，则根据这个Promise对象的执行结果决定（resolve，reject）

      const fn = async () => {
        // return 'wf';
        // throw new Error('error');
        return new Promise((resolve, reject) => resolve('success'));
      };
      console.log(fn());

在这里插入图片描述

根据返回的结果，可以进行then、catch操作

      const fn = async () => {
        // return 'wf';
        // throw new Error('error');
        return new Promise((resolve, reject) => resolve('success'));
      };
      // console.log(fn());
      const result = fn();
      result.then(value => console.log(value)).catch(err => console.warn(err)); // success

await表达式

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

      const p = new Promise((resolve, reject) => resolve('success'));
      const fn = async () => {
        const result = await p;
        console.log(result);
      };
      fn(); // success

2.await 返回的是 Promise对象失败的值时

      const p = new Promise((resolve, reject) => reject('gg'));
      const fn = async () => {
        const result = await p;
        console.log(result);
      };
      fn(); // success

在这里插入图片描述
使用try…catch 捕获异常

      const p = new Promise((resolve, reject) => reject('gg'));
      const fn = async () => {
        try {
          const result = await p;
          console.log(result);
        } catch (error) {
          console.log(error);
        }
      };
      fn(); // gg

结合使用

读取文件

基于node环境 fs模块读取文件

const fs = require('fs');
const rf = path => {
  return new Promise((resolve, reject) => {
    fs.readFile(path, (err, data) => {
      if (err) reject(err);
      resolve(data.toString());
    });
  });
};
const fn = async () => {
  const result1 = await rf('./1.txt');
  const result2 = await rf('./2.txt');
  const result3 = await rf('./3.txt');
  console.log(result1 + '...' + result2 + '...' + result3);
};
fn();

在这里插入图片描述

发送ajax

      const ajaxData = url => {
        return new Promise((resolve, reject) => {
          const xhr = new XMLHttpRequest();
          xhr.open('get', url);
          xhr.send();
          xhr.onreadystatechange = () => {
            if (xhr.readyState === 4) {
              if (xhr.status >= 200 && xhr.status < 300) {
                resolve(xhr.response);
              } else {
                reject(xhr.status);
              }
            }
          };
        });
      };
      // ajaxData('http://ip-api.com/json/58.23.7.26?lang=zh-CN')
      //   .then(data => console.log(data))
      //   .catch(err => console.log(err));
      const fn = async () => {
        const res = await ajaxData('http://ip-api.com/json/58.23.7.26?lang=zh-CN');
        console.log(res);
      };
      fn();

对象扩展方法

Object.values 返回对象的值

Object.keys 返回对象的键

      const obj = {
        name: 'wf',
        code: ['c', 'c++', 'c#', 'java', 'js', 'ts'],
        pwd: [1, 2, 3, 4, 5, 6, 7, 8]
      };
      console.log(Object.keys(obj));
      console.log(Object.values(obj));

在这里插入图片描述

Object.entries 将键和值变为数组

      console.log(Object.entries(obj));

在这里插入图片描述
方便创建一个Map

      const m = new Map(Object.entries(obj));
      console.log(m);

在这里插入图片描述

Object.getOwnPropertyDescriptor 对象属性的描述对象

      console.log(Object.getOwnPropertyDescriptors(obj));

在这里插入图片描述
getOwnPropertyDescriptors得到的是对象创建时定义的属性

      const Obj = Object.create(null, {
        name: {
          value: 'wf',
          writable: true, // 是否可以写
          configurable: true, // 是否可以删除
          enumerable: true // 是否可以枚举
        }
      });

得到这些属性，可以对对象进行深层次的克隆。

sharp_wu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES8语法特性 async await values entries getOwnPropertyDescriptor

ES8async await为了解决异步编程，async await 结合使用是异步代码和同步代码一样生成器函数Promise函数async awaitasync函数async 函数的返回值为 Promise对象（即使返回的是字符串）只要返回的不是一个Promise对象，结果都为成功的Promise对象，返回的是Promise对象，结果为Promise对象返回的结果（成功或失败）。Promise对象的结果由 async 函数执行的返回值决定1.return的不是一个Promise对象（
复制链接

扫一扫