Comments (7)
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.
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. 使用对称加密进行加密通信
- 《图解HTTP》
- 数字签名是什么 阮一峰
- 图解SSL/TLS协议
from practice.
3.12
peer dependency
回调
事件循环 event loop
- 详解JavaScript中的Event Loop(事件循环)机制
- Philip Roberts: What the heck is the event loop anyway? | JSConf EU 2014
from practice.
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.
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.
3.25 周日
- let const 深入,关于作用域的问题
- File API
- Vue 生命周期深入
- iframe 通信
- Http2.0
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.
鼓掌,到此一游
from practice.
Related Issues (6)
- 2017.7 HOT 10
- 2017.8 HOT 9
- 2018.4
- 【深入浅出Nodejs】学习笔记
- 2018.5 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from practice.