web学习笔记(四十二)

目录

[1.ECMAScript 新特性-async 和await](#1.ECMAScript 新特性-async 和await)

1.1async函数

1.2await函数

1.3补充:

[2. ES6模块化](#2. ES6模块化)

2.1模块化的优点

[2.2 ES6 模块化语法](#2.2 ES6 模块化语法)

[2.3 ES6 模块暴露](#2.3 ES6 模块暴露)

[2.4ES6 模块导入](#2.4ES6 模块导入)


1.ECMAScript 新特性-async 和await

1.1async函数

  • async函数可以单数使用,但一般我们会将async函数和await函数结合使用,可以让异步代码像同步代码一样运行,也可以用来解决回调地狱的问题。

  • async函数的返回值为promise对象。promise对象的结果由async函数执行的返回值决定

    javascript 复制代码
            const show = async function () {
                //返回值是一个promise对象 
                console.log('hhh');
                // 如果返回值是非promise或undefined,表示成功,返回值是成功的值
                // return 'lll';
                // 返回值是promise对象时
                return Promise.resolve('ok')
                // return Promise.reject('no')
            }
            var a = show();
            console.log(a);

1.2await函数

  1. await必须写在async函数中,但是async函数中可以没有await

  2. await右侧的表达式一般为promise对象,但也可以是其它值

    javascript 复制代码
       //1.创建promise对象
            const p = new Promise((resolve, reject) => {
                resolve('成功'); //用户数据
    
            });
            //await 要放在async函数中
            async function main() {
                let result = await p;
                //成功的结果
                console.log(result);
            }
            //调用函数
            main()
  3. 如果表达式是Promise 对象,await返回的是Promise成功的值

  4. 如果表达式是其它值,直接将此值作为await的返回值

  5. 如果await的promise失败了,就会抛出异常,需要通过 try...catch捕获处理

    javascript 复制代码
        //1.创建promise对象
            const p = new Promise((resolve, reject) => {
                // resolve('成功的值');//用户数据
                reject('失败啦')
    
            });
            //await 要放在async函数中
            async function main() {
                try {
                    let result = await p;
                    //成功的结果
                    console.log(result);
                } catch (i) {
                    console.log(i);
                }
    
            }
            //调用函数
            main()

1.3补充:

  • js是单线程的,在执行时会分为同步任务和异步任务,异步任务又分为宏任务(setTimeout,setInterval) 和微任务(promise,await),微任务优先于宏任务执行。
  • async通常与await搭配使用,await必须在asyc函数中使用,当async函数中遇到await关键字时,程序 会等待await关键字后面所有的异步代码执行完毕后才会继续执行,注意:await后面通常会跟一个promise 异步任务 当promise状态改变才会执行后面代码
  • 定义函数为异步函数,使用关键字async定义的函数,会自动 返回一个成功状态的promise对象 当前函数的返回值则为promise对象成功状态的返回值

2. ES6模块化

模块化就是讲一个大的程序文件,拆分成许多小的文件,然后讲小文件组合起来。

2.1模块化的优点

  1. 防止命名冲突
  2. 代码复用----相当封装一个函数,暴露一个接口
  3. 高维护性----- 可以让多个人分别更改不同模块,互不影响

2.2 ES6 模块化语法

模块功能主要由两个命令构成:export 和 import。

  • export 命令 就是导出,用于规定模块的对外接口,会对外暴露接口。
  • import 命令 就是导入,用于输入其他模块提供的功能。

2.3 ES6 模块暴露

(1)分别暴露:就是在需要暴露的变量或函数名前加上 export关键字。

javascript 复制代码
             export let a=10;
            export function show(){
                console.log('分别暴露');
            }

(2)统一暴露:在export{ }内部写入需要暴露的变量名或函数名,中间用逗号隔开。

javascript 复制代码
// 统一暴露
let a = 100;
let fn = function () {
    console.log('统一导出');
}
const obj = {
    name: 'aaa',
    age: 18
}
let arr = [10, 20, 30]
export {
    a,
    fn,
    obj,
    arr
}

(3)默认暴露:export default { }在花括号内可以写入任意数据类型的数据,但大部分都是对象。

javascript 复制代码
// 默认暴露 default
let c = 1000;
let show = function () {
    console.log('默认暴露222');
}
export default {
    // 可以是数字、字符串,但大部分是对象
    a: 800,
    b: [11, 22, 33, 44],
    fn: function () {
        console.log('默认暴露');
    },
    c,
    show
}

2.4ES6 模块导入

(1) 通用方法导入: import 变量名 from '路径' (变量名中存的是对象)

javascript 复制代码
  import * as m1 from './1.js'
  • 在解构时如果发生变量名重复的情况则需要使用as别名来解决问题。此时使用变量名或者需要调用函数直接用别名进行操作就可以了。
javascript 复制代码
  import {  a, fn as fn1, obj, arr as arr1} from './2.js';
     console.log(arr1);
     fn1();
  • 在使用默认暴露时就不能使用上面的通用方法导入了,默认暴露有专门的简便的导入形式。
javascript 复制代码
import m3 from './3.js'

(2)解构方法来导入

javascript 复制代码
 import {  a, fn , obj, arr } from './2.js';

如果默认暴露想要以解析的方式进行导入操作的话必须要使用别名,因为default相当于一个关键字。所以得使用别名。

javascript 复制代码
 import{default as m4}from './3.js';
    console.log(m4);
  • 导入不存在的变量,程序不会抛出异常,只是值为undefined。
  • 除了对象类型以外,导出的属性对外都是只读的
相关推荐
腾讯TNTWeb前端团队32 分钟前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰4 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪4 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪4 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy5 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom5 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom6 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom6 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom6 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom6 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试