3.4 常用 ES6 数组和对象的解构写法 <div class="snippe

3.11 HTTPS 的加密步骤 HTTP 的缺点 <ul dir="auto"

3.19 readAsBinaryString <div class="highlight highlight-sour

2018.3 about practice HOT 7 OPEN

karenchuang commented on September 5, 2024

2018.3

from practice.

Comments (7)

KarenChuang commented on September 5, 2024

3.6

promise 笔记

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。

Promise instanceof Object // true

Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。

两个特点

对象的状态不受外界影响。

promise对象代表一个异步操作，有三种状态：
- pending（进行中）
- fulfilled（已成功）
- rejected（已失败）
一旦状态改变，就不会再变，任何时候都可以得到这个结果 (++这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。++)

两个缺点

无法取消Promise，一旦新建它就会立即执行，无法中途取消。
如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。
当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

基本用法

Promise对象是一个构造函数，用来生成Promise实例。

const promise = new Promise((resolve, reject) => {
  if (/* 异步操作成功 */){
  // 结果 value 作为 resolve 的参数传递出去
    resolve(value);
  } else {
    reject(error);
  }
})

Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供，不用自己部署。

然后这个promise实例生成后，可以用then方法接受两个回调函数作为参数。这两个函数都接受Promise对象传出的值作为参数。

Promise实现 Ajax

const getJSON = function(url) {
  const promise = new Promise(function(resolve, reject){
    const handler = function() {
      if (this.readyState !== 4) {
        return;
      }
      if (this.status === 200) {
        resolve(this.response);
      } else {
        reject(new Error(this.statusText));
      }
    };
    const client = new XMLHttpRequest();
    client.open("GET", url);
    client.onreadystatechange = handler;
    client.responseType = "json";
    client.setRequestHeader("Accept", "application/json");
    client.send();

  });

  return promise;
};

getJSON("/posts.json").then(function(json) {
  console.log('Contents: ' + json);
}, function(error) {
  console.error('出错了', error);
});

catch

Promise 在resolve语句后面，再抛出错误，不会被捕获，等于没有抛出。因为 Promise 的状态一旦改变，就永久保持该状态，不会再变了。

一般来说，不要在then方法里面定义 Reject 状态的回调函数（即then的第二个参数），总是使用catch方法。

finally()

ES2018

promise
.then(result => {···})
.catch(error => {···})
.finally(() => {···});

finally方法的回调函数不接受任何参数,
finally方法里面的操作，应该是与状态无关的，不依赖于 Promise 的执行结果。

例如页面的图片loading

finally()的实现

Promise.prototype.finally = function (callback) {
  let P = this.constructor;
  // resolve 方法在constructor上
  // finally then cath 在prototype 上
  return this.then(
    value  => P.resolve(callback()).then(() => value),
    reason => P.resolve(callback()).then(() => { throw reason })
  );
};

Promise.all()

const p = Promise.all([p1, p2, p3]);

Promise.all方法接受一个数组作为参数，p1、p2、p3都是 Promise 实例，如果不是，就会先调用下面讲到的Promise.resolve方法，将参数转为 Promise 实例，再进一步处理。（Promise.all方法的参数可以不是数组，但必须具有 Iterator 接口，且返回的每个成员都是 Promise 实例。）

需要全部都fulfilled之后p才会fulfilled，只要有一个rejected了的话，p就rejected了，而且返回的是第一个rejected的返回值。

Promise.race()

Promise.race 只要有一个promise对象进入 FulFilled 或者 Rejected 状态的话，就会继续进行后面的处理。

Promise的实现

// todo

from practice.

KarenChuang commented on September 5, 2024

3.11

HTTPS 的加密步骤

HTTP 的缺点

使用明文通信
不验证通信方的身份
无法校验报文的完整性

共享密钥加密（对称密钥加密）

Client 使用 key-A 对内容进行加密发送给 Server，Server同样使用 key-A 对内容进行解密得到内容。
问题：key-A 如果被盗用

公开密钥加密（非对称密钥加密）

使用一对配套的 key 来进行加密

public key
private key
Client 使用 public key 加密，发送，Server 使用相应的 private key 去解密。

public key 可以被任意获取，但都不影响安全性，因为需要对应的private key才可以解开。

证书

Server 向数字证书认证中心申请 public key，将获得数字签名（Digital Certificate），数字签名包括了 public key和服务器的一些相关信息

加密步骤

1. 先进行非对称加密方式交换之后对称加密要用的key建立好安全的ssl连接

2. 使用对称加密进行加密通信

from practice.

KarenChuang commented on September 5, 2024

3.12

peer dependency

回调

事件循环 event loop

from practice.

KarenChuang commented on September 5, 2024

3.19

readAsBinaryString

function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsBinaryString(file)
    reader.onload = () => resolve(window.btoa(reader.result))
    reader.onerror = error => reject(error)
  })
}

readAsDataURL

function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsArrayBuffer(file)
    reader.onload = () => {
      resolve(_arrayBufferToBase64(reader.result))
    }
    reader.onerror = error => reject(error)
  })
}

function _arrayBufferToBase64 (buffer) {
  let binary = ''
  let bytes = new Uint8Array(buffer)
  let length = bytes.byteLength
  for (var i = 0; i < length; i++) {
    binary += String.fromCharCodebytes([i])
  }
  return window.btoa(binary)
}

from practice.

KarenChuang commented on September 5, 2024

3.23

有一个ajax的函数，返回的是一个promise，写一个retry的函数，调用这个ajax函数，如果ajax返回报错则延时一秒再掉一次，最多调5次，如果成功则返回成功的值。

function ajax() {
  return new Promise((resolve, rejct) => {
    let req = new XMLHttpRequest()
      // 创建 onreadystatechange 的回调函数
    req.onreadystatechange = (() => {
      if (req.readyState === 4) {
        if (req.status === 200) {
          resolve(req.response)
        } else {
          rejct(req.status)
        }
      }
    })
    req.open('GET', 'https://api.github.com/users/karenchuang')
    req.send()
  })
}

function retry() {
  function callAjax(cb) {
    ajax().then(res => {
        cb(null, res)
      })
      .catch(err => {
        cb(err, null)
      })
  }
  let times = 0
  return new Promise((resolve, reject) => {
    function callback(err, res) {
      times++
      if (res) {
        resolve(res)
      } else if (times === 5) {
        reject(err)
      } else {
        setTimeout(() => {
          callAjax(callback)
        }, 1000)
      }
    }
    callAjax(callback)
  })
}

retry().then(res => {
    console.log(res)
  })
  .catch(err => {
    console.log(err)
  })

from practice.

KarenChuang commented on September 5, 2024

3.25 周日

let & const

暂时性死区（TDZ）

如果区域中存在let/const命令，则会形成封闭作用域，凡在声明之前使用的话，就会报错。

暂时性死区的本质就是，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。

块级作用域

在 ES5 中只有函数作用域和全局作用域的概念；
在 ES6 中存在块级作用域。

const

const声明一个只读的常量。一旦声明，常量的值就不能改变。

本质

const 声明的变量指向的那个内存地址不得改动。

对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。

对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指针，const只能保证这个指针是固定的，至于它指向的数据结构是不是可变的，就完全不能控制了。

const foo = {};

// 为 foo 添加一个属性，可以成功
foo.prop = 123;
foo.prop // 123

// 将 foo 指向另一个对象，就会报错
foo = {}; // TypeError: "foo" is read-only

from practice.

cobish commented on September 5, 2024

鼓掌，到此一游

from practice.

Comments (7)

3.6

promise 笔记

两个特点

两个缺点

基本用法

Promise实现 Ajax

catch

finally()

finally()的实现

Promise.all()

Promise.race()

Promise的实现

3.11

HTTPS 的加密步骤

HTTP 的缺点

共享密钥加密（对称密钥加密）

公开密钥加密（非对称密钥加密）

证书

加密步骤

1. 先进行非对称加密方式交换之后对称加密要用的key建立好安全的ssl连接

2. 使用对称加密进行加密通信

3.12

peer dependency

回调

事件循环 event loop

3.19

readAsBinaryString

readAsDataURL

3.23

3.25 周日

let & const

暂时性死区 （TDZ）

块级作用域

const

本质

Related Issues (6)

Recommend Projects

Recommend Topics

Recommend Org

暂时性死区（TDZ）