4-es6(肆)

当前位置:

首页 > temp > JavaScript教程 >

4-es6(肆)

1. Promise对象

Promise 对象用于表示一个异步操作的最终完成 (或失败)及其结果值

异步操作会先挂起，优先执行同步操作后再执行异步操作

一个 Promise 对象代表一个在这个 promise 被创建出来时不一定有已知的值。它让您能够把异步操作最终的成功返回值或者失败原因和相应的处理程序关联起来。这样使得异步方法可以像同步方法那样返回值：异步方法并不会立即返回最终的值，而是会返回一个 promise，以便在未来某个时候把值交给使用者。

说人话就是promise用于判断接口请求是否正确，正确执行then方法里的内容，错误执行catch里的内容。最后返回promise里的执行结果。

一个 Promise 必然处于以下几种状态之一：

初始化（pending）: 初始状态，既没有被接受，也没有被拒绝。
已接受（fulfilled）: 意味着操作成功完成。
已拒绝（rejected）: 意味着操作失败。

1.1 基本用法

let promise1 = new Promise(function (resolve, reject) {  //resolve、reject均为方法
    if (3 == 3) {
        resolve('成功了');
    } else {
        reject('失败了');
    }
})
console.log(promise1);//Promise {<fulfilled>: "成功了"}

1.2 then、catch方法

then方法会接收promise的fulfilled状态并执行then方法里的内容

then() 函数会返回一个和原来不同的新的 Promise，所以then可以链式调用

如果promise

返回了一个值，那么 then 返回的 Promise 将会成为接受状态，并且将返回的值作为接受状态的回调函数的参数值
没有返回任何值，那么 then 返回的 Promise 将会成为接受状态，并且该接受状态的回调函数的参数值为 undefined。
抛出一个错误，那么 then 返回的 Promise 将会成为拒绝状态，并且将抛出的错误作为拒绝状态的回调函数的参数值

promise1
    .then((res) => {
        return res += '第一步, '
    }) //then返回的promise对象状态为fulfilled，PromiseResult(同时也是下一个then的参数)值为"成功了, 第一步," 
    .then((res) => {
        return res += '第二步。'
    })//then返回的promise对象状态为fulfilled，PromiseResult(同时也是下一个then的参数)值为"成功了, 第一步,第二步。"

catch()函数同then一样，会接收promise的rejected状态并执行catch方法里的内容

不过有以下要注意的内容

// 抛出一个错误，大多数时候将调用catch方法
var p1 = new Promise(function(resolve, reject) {
  throw 'Uh-oh!';
});
p1.catch(function(e) {
  console.log(e); // "Uh-oh!"
});
// 在异步函数中抛出的错误不会被catch捕获到
var p2 = new Promise(function(resolve, reject) {
  setTimeout(function() {
    throw 'Uncaught Exception!';
  }, 1000);
});
p2.catch(function(e) {
  console.log(e); // 不会执行
});
// 在resolve()后面抛出的错误会被忽略
var p3 = new Promise(function(resolve, reject) {
  resolve();
  throw 'Silenced Exception!';
});
p3.catch(function(e) {
   console.log(e); // 不会执行
});

1.3 all方法

all()方法接受一个数组作为参数，数组的元素是Promise实例对象，当参数中的实例对象的状态都为fulfilled时，Promise.all( )才会有返回。

Promise.all([pro1,pro2]).then(function(result){ //pro1和pro2是promise实例对象
    console.log(result);
});

一般的应用场景：一般这样的场景：我们执行某个操作，这个操作需要得到需要多个接口请求回来的数据来支持，但是这些接口请求之前互不依赖，不需要层层嵌套。这种情况下就适合使用Promise.all( )方法，因为它会得到所有接口都请求成功了，才会进行操作

1.4 race方法

race()参数要求跟Promise.all( )方法一样，不同的是，它参数中的promise实例，只要有一个状态发生变化（不管是成功fulfilled还是异常rejected），它就会有返回，而且谁优先返回就接受谁。其他实例中再发生变化，也不会再执行了

Promise.all([pro1,pro2]).then(function(result){ //pro1和pro2是promise实例对象
    console.log(result);
});

2. ES7中Async和await

async和await关键字让我们可以用一种更简洁的方式写出基于promise异步行为，而无需刻意地链式调用promise。

async的返回值是一个promise对象，这个promise要么会通过一个由async函数返回的值被解决，要么会通过一个从async函数中抛出的（或其中没有被捕获到的）异常被拒绝。

async函数可能包含0个或者多个await表达式。await表达式会暂停整个async函数的执行进程并出让其控制权，只有当其等待的基于promise的异步操作被兑现或被拒绝之后才会恢复进程。promise的解决值会被当作该await表达式的返回值。

function work() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('worked');
    }, 2000);
  });
}
async function asyncCall() {
  let result = await work();
  console.log(result); 
  return "async函数的返回值，[PromiseResult]中的值"
}
asyncCall();//"worked"

3. 类基本用法

类是用于创建对象的模板。他们用代码封装数据以处理该数据。类是“特殊的函数”，就像定义的函数表达式和函数声明一样，类语法有两个组成部分：类表达式和类声明。

3.1 类的声明

class cube {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

3.2 类的表达式

类的表达式有未命名和命名两种

// 未命名/匿名类
let Rectangle = class {
  constructor(height) {
    this.height = height;
  }
};
console.log(Rectangle.name);//"Rectangle"
// 命名类
let Rectangle = class Rectangle2 {
  constructor(height) {
    this.height = height;
  }
  play(){
      console.log('play');
  }
  static create(){
      console.log('create a cube')
  }
};
console.log(Rectangle.name);
// 输出: "Rectangle2"

3.3 类体和方法定义

constructor方法是必须且唯一的，用于创建和初始化一个由class创建的对象；其他方法可以自定义

'static' 关键字用来定义一个类的一个静态方法。不能继承，调用静态方法不需要实例化该类，但不能通过一个类实例调用静态方法。静态方法通常用于为一个应用程序创建工具函数

3.4 类的继承

extends 关键字用于实现子类继承父类,子类使用super关键字来调用父类的属性或方法

class Animal {
  constructor(name) {
    this.name = name;
  }
   speak() {
    console.log(`${this.name} is my name.`);
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name); // 调用父类构造函数并传入name参数
  }
  speak() {
    super.speak()
    console.log(`yes`);
  }
}

4. 模块化

4.1 模块的导入与导出

例如：导出model.js的内容；导入到main.js中

as 可以在导出与导入的大括号内为导出导入项设置一个别名；主要用于解决命名冲突的问题

model.js

export { name as modelName, say as modelSay };
let name = 'vivy'
function say(){
    console.log(`i am a singer`);
}

main.js

import { name as modelName, say as modelSay } from 'model.js'
//可以使用*来整体导入
import * from 'model.js'

__EOF__

本文作者： ReCreyed

本文链接： https://www.cnblogs.com/recreyed/p/es604.html

栏目列表