JavaScript异步编程-Promise

Mon, 27 Dec 2021 08:58:31 +0000

一、回调模式

早期对于异步操作的处理主要是通过回调函数的方式进行，将函数传入异步操作，当该操作完成后该函数将会被调用，这里会存在一个问题，当嵌套多个回调函数的时候，会陷入回调地狱，代码的可读性变得极差。

method1(function(err, result) {
    if (err) {
        throw err;
    }
    method2(function(err, result) {
        if (err) {
            throw err;
        }
        method3(function(err, result) {
            if (err) {
                throw err;
            }
            method4(function(err, result) {
                if (err) {
                    throw err;
                }
                method5(result);
            });
        });
    });
});

二、Promise

Promise代表一个承诺，表示将来在某时刻完成。Promise是ECMAscript 6提供的一个异步编程的API，可以通过它来传递异步消息。

2.1 Promise生命周期

当进行异步操作并且尚未完成时，Promise状态位挂起态（Pedding），当操作完成时，Promise会根据操作的结果转为一下两种状态：

fulfilled: 意味着操作成功完成。
rejected: 意味着操作失败

2.2 基本使用

使用new创建Promise，该类接收一个函数，该函数的两个参数分别是resolve和reject，其中在异步操作成功完成的时候使用resolve函数传递成功参数，在异步操作异常的时候使用reject函数传递失败参数。

// 创建Promise
const promise = new Promise(function(resolve, reject) {
  // 耗时操作
  setTimeout(() => {
    resolve("success done");
  }, 2000);
});

// 接收处理结果
promise.then(function(content) {
  // 完成
}, function(err) {
  // 拒绝
});

promise.then(content => {
  // 完成
});

promise.then(null, function(content) {
  // 拒绝
});

// 等同于
promise.catch(function(err) {
  // 拒绝
});

如果在Promise内部抛出异常，Promise的拒绝函数将会执行。

ES6模块化

Fri, 17 Dec 2021 08:35:25 +0000

一、基本导出导入

任意变量、函数和类都能作为导出类型

//export_demo.js

//导出变量
export var name = "john";
export const color = "red";
export const num = 7;

//导出函数
export function sum(num1, num2) {
  return num1 + num2;
}

//导出类
export class Person{
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

//import_demo.js
//导入变量、函数、类
import {name, color, num, sum} from "./export_demo.js";

console.log(name); //john
name = "mary"; //error 不能对导入的变量二次赋值

在html中引用模块化js的时候，需要在type指定为module：

<script type="module" src="./import_demo.js"></script>

导入一整个模块

import * as example from "./export_demo.js";

console.log(example.name) //john

更改导入变量的值

export var name = "mary";

export function changeName(newName) {
  name = "lily";
}

导入该变量和函数

import {name, changeName} from "./example.js";

console.log(name); "mary"
changeName("bob");
console.log(name); "bob"

name = kery; //error

二、重命名导出导入

使用as重命名导出

function sum(num1, num2) {
  return num1 + num2;
}

export { sum as add };

这时导入该函数的时候可以使用add作为函数名

import { add } from "./example.js";

如果在导入的时候需要重命名同样可以使用as关键字

JavaScript on Blog