ES6模块化与Promise详解-优快云博客

本文主要介绍了ES6中的模块化语法，包括1-5步的导出和导入方式，如通过`as`重命名数据，默认导出和混合式导出。重点强调了模块化的一个特点是只执行一次，且导出引用类型时导出的是引用地址。此外，还简述了Promise的使用，包括其基本语法和与async/await结合的应用，以及在错误处理中使用的try块。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

es6

模块化语法

1、导出
        export const a = 1;
        export const b = 2;
        export const c = 3;
        export const d = 4;
  2、引入:  将需要的数据放置到 {},导出的数据名字，必须要和引入的一致。
        <script type="module">
            import {a,b,c,d} from "./mo/mo1.js";
            console.log(a,b,c,d)
        </script>

1、导出
    export const a = 1;
    export const b = 2;
    export const c = 3;
    export const d = 4;
    export const e = 4;
    export const f = 4;
    export const g = 4;
    export const h = 4;
    export const i = 4;
  2、引入
    <script type="module">
        // 当引入的模块，数据比较多时.可以解决冲突。
        import * as mo2 from "./mo/mo2.js"
        console.log(mo2.b);
    </script>

3,通过as对数据重命名

1、导出
    export const a = 222;
  2、引入
    <script type="module">
        import {a} from "./mo/mo3.js";
        // 重命名
        import {a as moa} from "./mo/mo2.js"
        console.log(a,moa);
    </script>

4,默认导出

1、导出
    // 在模块当中只能使用一次
    export default {
        userName:"刘德华"
    }
2、引入
    <script type="module">
        import abc from "./mo/mo4.js";
        console.log(abc.userName);
    </script>

5,混合式导出

1、导出
    export const c = 16;
    export default function () {
            console.log(12)
    }
2、引入
    <script type="module">
        import mo5,{c} from "./mo/mo5.js";
        mo5();
        console.log(c)
    </script>

在es6模块化当中，导出的模块只会执行一次。当模块被多次引入时，该模块只会运行一次。
导出的内容都是第一次所导出。如果导出的是引用类型，那么具体导出的是引用类型的引用地址

promise

语法

new Promise(function (resolve,reject) {
    // resolve-->是一个函数，返回结果
    // reject-->是一个函数，返回异常
    // 处理异步
    setTimeout(()=>{
        // resolve(12);
        reject(16)
    },1)
    // .then 当异步操作执行完毕以后会执行.then. 是一个函数，接收二个参数（均是函数）
    // 第一个函数是接收resolve返回结果，第二个函数是接收reject返回的结果
}).then(function(n){
    console.log(111,n)
},function (err) {
    console.log(2222,err)
})

new Promise(function (resolve,reject) {
    // resolve-->是一个函数，返回结果
    // reject-->是一个函数，返回异常
    // 处理异步
    setTimeout(()=>{
        try{
            // console.log(a);
            resolve(12);
        }catch (e) {
            reject(16);
        }
        // resolve(12);
        // reject(16)
    },1)
    // .then 当异步操作执行完毕以后会执行.then. 是一个函数，接收二个参数（均是函数）
    // 第一个函数是接收resolve返回结果，第二个函数是接收reject返回的结果
    // 使用.catch也可以接收reject的返回结果。但是使用.catch,就不要在.then当中设置第二个参数。
}).then(function(n){
    console.log(111,n)
}).catch(function (err) {
    console.log(333,err)
})

async await

// 连缀写法。
function one() {
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve("学习")
        },1)

    })
}
function two() {
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve("投简历")
        },1)
    })
}
function three() {
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve("找工作")
        },1)
    })
}
function four() {
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve("赚钱")
        },1)
    })
}
// 标识符
async function fn() {
    // 当one当中的promise执行完毕以后将结果返回给oneStr
   const oneStr =  await one();
   console.log(oneStr);
   const twoStr = await two();
   console.log(twoStr);
   const threeStr = await three();
   console.log(threeStr);
   const fourStr = await four();
   console.log(fourStr);
}
fn();

try

// try:尝试
function fn() {
    // 当try当中的代码出现异常时会执行catch,并将错误信息以参数的形式传给catch
    try{
        console.log(a)
    }catch (err) {
        console.log(123,err);
    }finally {
        console.log(44444)
    }
}
fn();