promise和flex——学习笔记

本文是自己复习的笔记内容，可能不太完整，但是我觉得可能有人会需要，哈哈哈

promise

Promise对象是一个原生的javascript对象，是一种异步编程的解决方案，它通过一个回调，可以避免更多的回调.

1. 用法：

结果：2秒后打印出111

2. promise重写

• Promise通过new创造，是一个类，执行这个类的时候需要传递一个执行器，并且这个执行器会立即执行。

class Promise{
 constructor(executer){		//接收一个执行器
   executer();
 }
}

• Promise中有三种状态，分别是：成功fulfilled、失败rejected和等待pending，状态只能从pending—>fulfilled，或者pending—>rejected，状态不可逆。
• 状态通过resolve和reject两个函数改变，resolve改变状态为fulfilled，reject改变状态为rejected。

class Promise {
  constructor(executer) {
    executer();
  }
  resolve = () => {
    // 成功时执行
  };
  reject = () => {
    // 失败时执行
  };
}

• 在类中status默认为pending，当调用resolve时status变为成功，调用reject时status变为失败，状态确定后不可更改，通过判断status是否为等待来返回值。

const PENDING = 'pending'; // 等待
const FULFILLED = 'fulfilled'; // 成功
const REJECTED = 'rejected'; // 失败
class Promise {
  constructor(executer) {
    executer();
  }
  status = PENDING; // 状态默认为pending等待
  resolve = () => {
    // 成功时执行
    if (this.status !== PENDING) return;
    this.status = FULFILLED; //将状态改为成功
  };
  reject = () => {
    // 失败时执行
    if (this.status !== PENDING) return;
    this.status = REJECTED; //将状态改为失败
  };
}

• Promise的then方法有两个参数，状态成功调用第一个，状态失败调用第二个

const PENDING = 'pending'; // 等待
const FULFILLED = 'fulfilled'; // 成功
const REJECTED = 'rejected'; // 失败
class Promise {
  constructor(executer) {
    executer();
  }
  status = PENDING; // 状态默认为pending等待
  successCallback = undefined; // 成功的回调函数
  failCallback = undefined; // 失败的回调函数
  
  resolve = () => {
    // 成功时执行
    if (this.status !== PENDING) return;
    this.status = FULFILLED; //将状态改为成功
  };
  reject = () => {
    // 失败时执行
    if (this.status !== PENDING) return;
    this.status = REJECTED; //将状态改为失败
  };
  then(successCallback, failCallback) {
    // then方法有两个参数
    if (this.status === FULFILLED) {
      // 成功调用第一个回调函数
      successCallback(this.value);
    } else if (this.status === REJECTED) {
      // 失败调用第二个回调函数
      failCallback(this.reason);
    }
  }
}

• Promise处理异步情况，需要将成功和失败的回调存储起来，存储后再resolve和reject中判断是否存在成功或失败的回调，存在则调用

const PENDING = 'pending'; // 等待
const FULFILLED = 'fulfilled'; // 成功
const REJECTED = 'rejected'; // 失败
class Promise {
  constructor(executer) {
    executer();
  }
  status = PENDING; // 状态默认为pending等待
  value = undefined; // 成功之后的值
  reason = undefined; // 失败之后的原因
  successCallback = undefined; // 成功的回调函数
  failCallback = undefined; // 失败的回调函数

  resolve = (value) => {
    // 成功时执行
    if (this.status !== PENDING) return;
    this.status = FULFILLED; //将状态改为成功
    this.value = value; // 将成功的值传递
    this.successCallback && this.successCallback(this.value); // 如果成功回调存在，则调用
  };
  reject = (reason) => {
    // 失败时执行
    if (this.status !== PENDING) return;
    this.status = REJECTED; //将状态改为失败
    this.reason = reason; // 将失败的值传递
    this.failCallback && this.failCallback(this.reason); // 如果失败回调存在，则调用
  };

  then(successCallback, failCallback) {
    // then方法有两个参数
    if (this.status === FULFILLED) {
      // 成功调用第一个回调函数
      successCallback(this.value);
    } else if (this.status === REJECTED) {
      // 失败调用第二个回调函数
      failCallback(this.reason);
    } else {
      // 当状态为等待时，将成功回调和失败回调存储起来
      this.successCallback = successCallback;
      this.failCallback = failCallback;
    }
  }
}

3. Promise方法

• promise.all()接收一个由promise任务组成的数组作为参数，当数组中所有的promise返回resolve时，返回成功信息，当数组中出现一个reject时返回失败信息，可以理解为执行并发操作。
• promise.race()接收一个由promise任务组成的数组作为参数，当数组中任意一个promise执行完成则返回当前promise的结果。
• promise.then()返回resolve的结果
• promise.catch()返回reject的结果
• promise.finally()返回Promise的结果无论是成功还是失败

flex

flex布局（弹性布局）是css中一种布局方式，通过display:flex创建弹性容器，让其子元素在内部灵活的排列布局。flex布局特点：

• 有主轴和交叉轴，默认水平方向为主轴，垂直方向为交叉轴。
• 对齐方式：主轴对齐使用justfity-content，交叉轴对齐使用align-items。
• 换行与自动调整，使用flex-wrap控制是否换行。

容器属性

1. justify-content：表示元素在主轴方向上的对齐方式，有flex-start(左对齐）、flex-end（右对齐）、center（居中）、space-between(行首和行尾无间隔）、space-around（行第一个元素到行首和行最后一个元素到行尾的间隔为两元素质检间隔的一半）、space-evenly（行首和行尾间隔为两元素质检间隔）
   
   
   
   
   
2. align-items：元素在交叉轴方向上对齐，有flex-start、flex-end、center、space-between、space-around、space-evenly、baseline（基线对齐）
3. flex-direction：决定主轴的方向，有row(水平，起点左侧）、row-reverse(水平，起点右侧）、column（垂直，起点顶部）、column-reverse（垂直、起点底部）
4. flex-wrap：元素是否换行，有wrap（换行）、nowrap（不换行）、wrap-reverse（换行、第一行在下方）
5. order：元素排列顺序，数值越小元素排列越靠前，默认为0
   
6. flex-grow：元素放大比例，默认为0不放大，如元素1的flex-grow为2，元素2的flex-grow为1，当有剩余空间时，前者扩大空间的倍数为后者的2倍
7. flex-shrik：元素缩小比例，默认为0不缩小，如元素1的flex-shrik为0，元素2的flex-shrik为1，当空间不足时，前者不变后者缩小
8. flex-basis：默认值为auto，当元素有width时，flex-basis取width的值，当元素无width时，flex-basis取元素内部内容的值