## 1\. 異步回調
### 1.1 回調地獄
在需要多個操作的時候，會導致多個回調函數嵌套，導致代碼不夠直觀，就是常說的回調地獄
### 1.2 并行結果
如果幾個異步操作之間并沒有前后順序之分,但需要等多個異步操作都完成后才能執行后續的任務，無法實現并行節約時間
## 2\. Promise
Promise本意是承諾，在程序中的意思就是承諾我**過一段時間后**會給你一個結果。 什么時候會用到**過一段時間**？答案是異步操作，異步是指可能比較長時間才有結果的才做，例如網絡請求、讀取本地文件等
## 3\. Promise的三種狀態
* Pending Promise對象實例創建時候的初始狀態
* Fulfilled 可以理解為成功的狀態
* Rejected 可以理解為失敗的狀態
> then 方法就是用來指定Promise 對象的狀態改變時確定執行的操作，resolve 時執行第一個函數（onFulfilled），reject 時執行第二個函數（onRejected）
## 4\. 構造一個Promise
### 4.1 使用Promise
~~~
let promise = new Promise((resolve, reject) => {
setTimeout(() => {
if(Math.random()>0.5)
resolve('This is resolve!');
else
reject('This is reject!');
}, 1000);
});
promise.then(Fulfilled,Rejected)
~~~
* 構造一個Promise實例需要給Promise構造函數傳入一個函數。
* 傳入的函數需要有兩個形參，兩個形參都是function類型的參數。
* 第一個形參運行后會讓Promise實例處于resolve狀態，所以我們一般給第一個形參命名為resolve,使 Promise 對象的狀態改變成成功，同時傳遞一個參數用于后續成功后的操作
* 第一個形參運行后會讓Promise實例處于reject狀態，所以我們一般給第一個形參命名為reject,將 Promise 對象的狀態改變為失敗，同時將錯誤的信息傳遞到后續錯誤處理的操作
### 4.2 es5模擬Promise
~~~
function Promise(fn) {
fn((data)=> {
this.success(data);
}, (error)=> {
this.error();
});
}
Promise.prototype.resolve = function (data) {
this.success(data);
}
Promise.prototype.reject = function (error) {
this.error(error);
}
Promise.prototype.then = function (success, error) {
this.success = success;
this.error = error;
}
~~~
### 4.3 es6模擬Promise
~~~
class Promise {
constructor(fn) {
fn((data)=> {
this.success(data);
}, (error)=> {
this.error();
});
}
resolve(data) {
this.success(data);
}
reject(error) {
this.error(error);
}
then(success, error) {
this.success = success;
this.error = error;
console.log(this);
}
}
~~~
## 5\. promise 做為函數的返回值
~~~
function ajaxPromise (queryUrl) {
return new Promise((resolve, reject) => {
let xhr = new XMLHttpRequest();
xhr.open('GET', queryUrl, true);
xhr.send(null);
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
resolve(xhr.responseText);
} else {
reject(xhr.responseText);
}
}
}
});
}
ajaxPromise('http://www.baidu.com')
.then((value) => {
console.log(value);
})
.catch((err) => {
console.error(err);
});
~~~
## 6.promise的鏈式調用
* 每次調用返回的都是一個新的Promise實例
* 鏈式調用的參數通過返回值傳遞
`then`可以使用鏈式調用的寫法原因在于，每一次執行該方法時總是會返回一個`Promise`對象
~~~
readFile('1.txt').then(function (data) {
console.log(data);
return data;
}).then(function (data) {
console.log(data);
return readFile(data);
}).then(function (data) {
console.log(data);
}).catch(function(err){
console.log(err);
});
~~~
## 7.promise API
### 7.1 Promise.all
* **參數**：接受一個數組，數組內都是`Promise`實例
* **返回值**：返回一個`Promise`實例，這個`Promise`實例的狀態轉移取決于參數的`Promise`實例的狀態變化。當參數中所有的實例都處于`resolve`狀態時，返回的`Promise`實例會變為`resolve`狀態。如果參數中任意一個實例處于`reject`狀態，返回的`Promise`實例變為`reject`狀態。
~~~
Promise.all([p1, p2]).then(function (result) {
console.log(result); // [ '2.txt', '2' ]
});
~~~
> 不管兩個promise誰先完成，Promise.all 方法會按照數組里面的順序將結果返回
### 7.2 Promise.race
* **參數**：接受一個數組，數組內都是`Promise`實例
* **返回值**：返回一個`Promise`實例，這個`Promise`實例的狀態轉移取決于參數的`Promise`實例的狀態變化。當參數中任何一個實例處于`resolve`狀態時，返回的`Promise`實例會變為`resolve`狀態。如果參數中任意一個實例處于`reject`狀態，返回的`Promise`實例變為`reject`狀態。
~~~
Promise.race([p1, p2]).then(function (result) {
console.log(result); // [ '2.txt', '2' ]
});
~~~
### 7.3 Promise.resolve
返回一個`Promise`實例，這個實例處于`resolve`狀態。
根據傳入的參數不同有不同的功能：
* 值(對象、數組、字符串等)：作為`resolve`傳遞出去的值
* `Promise`實例：原封不動返回
### 7.4 Promise.reject
返回一個`Promise`實例，這個實例處于`reject`狀態。
* 參數一般就是拋出的錯誤信息。
## 8\. q
Q是一個在Javascript中實現promise的模塊
### 8.1 q的基本用法
~~~
var Q = require('q');
var fs = require('fs');
function read(filename) {
var deferred = Q.defer();
fs.readFile(filename,'utf8', function (err, data) {
if(err){
deferred.reject(err);
}else{
deferred.resolve(data);
}
});
return deferred.promise;
}
read('1.txt1').then(function(data){
console.log(data);
},function(error){
console.error(error);
});
~~~
### 8.2 q的簡單實現
~~~
module.exports = {
defer(){
var _success,_error;
return {
resolve(data){
_success(data);
},
reject(err){
_error(err);
},
promise:{
then(success,error){
_success = success;
_error = error;
}
}
}
}
}
~~~
### 8.3 q的實現
~~~
var defer = function () {
var pending = [], value;
return {
resolve: function (_value) {
if (pending) {
value = _value;
for (var i = 0, ii = pending.length; i < ii; i++) {
var callback = pending[i];
callback(value);
}
pending = undefined;
}
},
promise: {
then: function (callback) {
if (pending) {
pending.push(callback);
} else {
callback(value);
}
}
}
};
};
~~~
## 9\. bluebird
實現 promise 標準的庫是功能最全，速度最快的一個庫
### 9.1 bluebird經典使用
~~~
var Promise = require('./bluebird');
var readFile = Promise.promisify(require("fs").readFile);
readFile("1.txt", "utf8").then(function(contents) {
console.log(contents);
})
var fs = Promise.promisifyAll(require("fs"));
fs.readFileAsync("1.txt", "utf8").then(function (contents) {
console.log(contents);
})
~~~
### 9.2 bluebird簡單實現
~~~
module.exports = {
promisify(fn){
return function () {
var args = Array.from(arguments);
return new Promise(function (resolve, reject) {
fn.apply(null, args.concat(function (err) {
if (err) {
reject(err);
} else {
resolve(arguments[1])
}
}));
})
}
},
promisifyAll(obj){
for(var attr in obj){
if(obj.hasOwnProperty(attr) && typeof obj[attr] =='function'){
obj[attr+'Async'] = this.promisify(obj[attr]);
}
}
return obj;
}
}
~~~
## 10\. 動畫
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>move</title>
<style>
.square{
width:40px;
height:40px;
border-radius: 50%;
}
.square1{
background-color: red;
}
.square2{
background-color: yellow;
}
.square3{
background-color: blue;
}
</style>
</head>
<body>
<div class="square square1" style="margin-left: 0"></div>
<div class="square square2" style="margin-left: 0"></div>
<div class="square square3" style="margin-left: 0"></div>
</body>
<script>
var square1 = document.querySelector('.square1');
var square2 = document.querySelector('.square2');
var square3 = document.querySelector('.square3');
/*function move(element,target,resolve){
let timer = setInterval(function(){
var marginLeft = parseInt(element.style.marginLeft, 10);
if(marginLeft == target){
resolve();
}else{
element.style.marginLeft = ++marginLeft+'px';
}
},13);
}*/
function move(element,target,resolve){
let current = 0;
let timer = setInterval(function(){
element.style.transform=`translateX(${++current}px)`;
if(current>target){
clearInterval(timer);
resolve();
};
},13);
}
function animate(element,target){
return new Promise(function(resolve,reject){
move(element,target,resolve);
});
}
animate(square1,100)
.then(function(){
return animate(square2,100);
})
.then(function(){
return animate(square3,100);
});
</script>
</html>
~~~
## 11\. co
### 11.1 co初體驗
~~~
let fs = require('fs');
function getNumber(){
return new Promise(function (resolve,reject) {
setTimeout(function(){
let number = Math.random();
if(number >.5){
resolve(number);
}else{
reject('數字太小');
}
},1000);
});
}
function *read(){
let a = yield getNumber();
console.log(a);
let b = yield 'b';
console.log(b);
let c = yield getNumber();
console.log(c);
}
function co(gen){
return new Promise(function(resolve,reject){
let g = gen();
function next(lastValue){
let {done,value} = g.next(lastValue);
if(done){
resolve(lastValue);
}else{
if(value instanceof Promise){
value.then(next,function(val){
reject(val);
});
}else{
next(value);
}
}
}
next();
});
}
co(read).then(function(data){
console.log(data);
},function(reason){
console.log(reason);
});
~~~
### 11.2 co連續讀文件
~~~
let fs = require('fs');
function readFile(filename){
return new Promise(function (resolve,reject) {
fs.readFile(filename,'utf8',function(err,data){
if(err)
reject(err);
else
resolve(data);
})
});
}
function *read(){
let a = yield readFile('./1.txt');
console.log(a);
let b = yield readFile('./2.txt');
console.log(b);
}
function co(gen){
let g = gen();
function next(val){
let {done,value} = g.next(val);
if(!done){
value.then(next);
}
}
next();
}
~~~
## 12\. Promise/A+完整實現
~~~
function Promise(executor) {
let self = this;
self.status = "pending";
self.value = undefined;
self.onResolvedCallbacks = [];
self.onRejectedCallbacks = [];
function resolve(value) {
if (value instanceof Promise) {
return value.then(resolve, reject)
}
setTimeout(function () { // 異步執行所有的回調函數
if (self.status == 'pending') {
self.value = value;
self.status = 'resolved';
self.onResolvedCallbacks.forEach(item => item(value));
}
});
}
function reject(value) {
setTimeout(function () {
if (self.status == 'pending') {
self.value = value;
self.status = 'rejected';
self.onRejectedCallbacks.forEach(item => item(value));
}
});
}
try {
executor(resolve, reject);
} catch (e) {
reject(e);
}
}
function resolvePromise(promise2, x, resolve, reject) {
if (promise2 === x) {
return reject(new TypeError('循環引用'));
}
let then, called;
if (x != null && ((typeof x == 'object' || typeof x == 'function'))) {
try {
then = x.then;
if (typeof then == 'function') {
then.call(x, function (y) {
if (called)return;
called = true;
resolvePromise(promise2, y, resolve, reject);
}, function (r) {
if (called)return;
called = true;
reject(r);
});
} else {
resolve(x);
}
} catch (e) {
if (called)return;
called = true;
reject(e);
}
} else {
resolve(x);
}
}
Promise.prototype.then = function (onFulfilled, onRejected) {
let self = this;
onFulfilled = typeof onFulfilled == 'function' ? onFulfilled : function (value) {
return value
};
onRejected = typeof onRejected == 'function' ? onRejected : function (value) {
throw value
};
let promise2;
if (self.status == 'resolved') {
promise2 = new Promise(function (resolve, reject) {
setTimeout(function () {
try {
let x = onFulfilled(self.value);
resolvePromise(promise2, x, resolve, reject);
} catch (e) {
reject(e);
}
});
});
}
if (self.status == 'rejected') {
promise2 = new Promise(function (resolve, reject) {
setTimeout(function () {
try {
let x = onRejected(self.value);
resolvePromise(promise2, x, resolve, reject);
} catch (e) {
reject(e);
}
});
});
}
if (self.status == 'pending') {
promise2 = new Promise(function (resolve, reject) {
self.onResolvedCallbacks.push(function (value) {
try {
let x = onFulfilled(value);
resolvePromise(promise2, x, resolve, reject);
} catch (e) {
reject(e);
}
});
self.onRejectedCallbacks.push(function (value) {
try {
let x = onRejected(value);
resolvePromise(promise2, x, resolve, reject);
} catch (e) {
reject(e);
}
});
});
}
return promise2;
}
Promise.prototype.catch = function (onRejected) {
return this.then(null, onRejected);
}
Promise.all = function (promises) {
return new Promise(function (resolve, reject) {
let result = [];
let count = 0;
for (let i = 0; i < promises.length; i++) {
promises[i].then(function (data) {
result[i] = data;
if (++count == promises.length) {
resolve(result);
}
}, function (err) {
reject(err);
});
}
});
}
Promise.deferred = Promise.defer = function () {
var defer = {};
defer.promise = new Promise(function (resolve, reject) {
defer.resolve = resolve;
defer.reject = reject;
})
return defer;
}
/**
* npm i -g promises-aplus-tests
* promises-aplus-tests Promise.js
*/
try {
module.exports = Promise
} catch (e) {
}
~~~
## 13\. 資源
* [bluebirdAPI](http://bluebirdjs.com/docs/api-reference.html)
* [JavaScript Promise迷你書(中文版)](https://liubin.github.io/promises-book/)
* [Promise/A+規范](https://segmentfault.com/a/1190000002452115)
* [Promise/A+](https://promisesaplus.com/)
## 14.作業
1.自己實現promise的all、race、resolve和reject方法
- 文檔說明
- 大廠面試題
- HTML
- 001.如何遍歷一個dom樹
- 002.為什么操作DOM會很慢
- 003.瀏覽器渲染HTML的步驟
- 004.DOM和JavaScript的關系
- JS
- 001.數組扁平化并去重排序
- 002.高階函數
- 003.sort() 對數組進行排序
- 004.call 、 apply 和bind的區別
- 006.0.1+0.2為什么等于0.30000000000000004
- 011.var、let、const 的區別及實現原理？
- 010.new操作符都做了什么
- 009.a.b.c.d 和 a['b']['c']['d']，哪個性能更高？
- 016.什么是防抖和節流？有什么區別？如何實現？
- 017.['1', '2', '3'].map(parseInt) what & why ?
- 018.為什么 for 循環嵌套順序會影響性能？
- 019.介紹模塊化發展歷程
- 020.push輸出問題
- 021.判斷數組的三個方法
- 022.全局作用域中，用 const 和 let 聲明的變量不在 window 上，那到底在哪里？如何去獲取？
- 023.輸出以下代碼的執行結果并解釋為什么
- 024.ES6 代碼轉成 ES5 代碼的實現思路是什么
- 025.為什么普通 for 循環的性能遠遠高于 forEach 的性能，請解釋其中的原因。
- 026.數組里面有10萬個數據，取第一個元素和第10萬個元素的時間相差多少
- 027.變量類型
- 028.原型和原型鏈
- 029.作用域和閉包
- 030. 異步
- 031.ES6/7 新標準的考查
- 024.事件冒泡/事件代理
- 025.手寫 XMLHttpRequest 不借助任何庫
- 026.什么是深拷貝？
- 0027.克隆數組的方法
- 0028.ES6之展開運算符(...)
- 0029.arguments
- 0030. requestAnimationFrame
- 0031.遞歸爆棧問題與解決
- 021.簡單改造下面的代碼，使之分別打印 10 和 20
- 032.箭頭函數與普通函數
- 033.去除掉html標簽字符串里的所有屬性
- 034.查找公共父節點
- 035.Promise
- 0036.JSON.stringify ()
- CSS
- 001. BFC
- 002.介紹下 BFC、IFC、GFC 和 FFC
- 003.分析比較 opacity: 0、visibility: hidden、display: none 優劣和適用場景
- 004.怎么讓一個 div 水平垂直居中
- 005.重排重繪
- 006.inline/block/inline-block的區別
- 007.選擇器的權重和優先級
- 008.盒模型
- 009.清除浮動
- 010.flex
- 011.nth-child和nth-of-type的區別
- 0012.overflow
- 0013.CSS3中translate、transform和translation的區別和聯系
- 0014.flex
- 0015.px、em、rem
- 0016.width:100%
- 網絡
- 001.講解下HTTPS的工作原理
- 002.介紹下 HTTPS 中間人攻擊
- 003.談談你對TCP三次握手和四次揮手的理解
- 004.A、B 機器正常連接后，B 機器突然重啟，問 A 此時處于 TCP 什么狀態
- 005.簡單講解一下http2的多路復用
- 006. 介紹下 http1.0、1.1、2.0 協議的區別？
- 007.永久性重定向（301）和臨時性重定向（302）對 SEO 有什么影響
- 008.URL從輸入到頁面展示的過程
- 009.接口如何防刷
- 010.http狀態碼？
- 0111.跨域/如何解決？
- 012.cookie 和 localStorage 有何區別？
- 013.Fetch API
- 014.跨域Ajax請求時是否帶Cookie的設置
- 0015.協商緩存和強緩存
- 性能優化
- 001.前后端分離的項目如何seo
- 002.性能優化的方法
- 003.防抖和節流
- React
- 001.React 中 setState 什么時候是同步的，什么時候是異步的？
- 002.Virtual DOM 真的比操作原生 DOM 快嗎？談談你的想法。
- 003.Hooks 的特別之處
- 004.元素和組件有什么區別?
- 005.什么是 Pure Components?
- 006.HTML 和 React 事件處理有什么區別?
- 007.如何將參數傳遞給事件處理程序或回調函數?
- 008.如何創建 refs?
- 009.什么是 forward refs?
- 010.什么是 Virtual DOM?
- 011.什么是受控組件、非受控組件?
- 012.什么是 Fragments ?
- 013.為什么React元素有一個$$typeof屬性？
- 014.如何在 React 中創建組件?
- 015.React 如何區分 Class 和 Function？
- 016.React 的狀態是什么?
- 017.React 中的 props 是什么?
- 018.狀態和屬性有什么區別?
- 019.如何在 JSX 回調中綁定方法或事件處理程序?
- 020.什么是 "key" 屬性，在元素數組中使用它們有什么好處?
- 021.為什么順序調用對 React Hooks 很重要？
- 022.setState如何知道該做什么？
- 023.hook規則？
- 024.Hooks 與 Class 中調用 setState 有不同的表現差異么?
- 025.useEffect
- 026.fiber的作用
- 027.context的作用？
- 028.setState何時同步何時異步？
- 029.react性能優化
- 030.fiber
- 031.React SSR
- 異步
- 001.介紹下promise
- 002.Async/Await 如何通過同步的方式實現異步
- 003.setTimeout、Promise、Async/Await 的區別
- 004.JS 異步解決方案的發展歷程以及優缺點
- 005.Promise 構造函數是同步執行還是異步執行，那么 then 方法呢？
- 006.模擬實現一個 Promise.finally
- 012.簡單手寫實現promise
- 015.用Promise對象實現的 Ajax
- 007.簡單實現async/await中的async函數
- 008.設計并實現 Promise.race()
- 009.Async/await
- 010.珠峰培訓promise
- git
- 001.提交但沒有push
- 002.gitignore沒有作用？
- Node
- 001.用nodejs，將base64轉化成png文件
- Koa
- 001.koa和express的區別
- 數據庫
- redux
- 001.redux 為什么要把 reducer 設計成純函數
- 002.在 React 中如何使用 Redux 的 connect() ?
- 003.mapStateToProps() 和 mapDispatchToProps() 之間有什么區別?
- 004.為什么 Redux 狀態函數稱為 reducers ?
- 005.如何在 Redux 中發起 AJAX 請求?
- 006.訪問 Redux Store 的正確方法是什么?
- 007.React Redux 中展示組件和容器組件之間的區別是什么?
- 008.Redux 中常量的用途是什么?
- 009.什么是 redux-saga?
- 設計模式
- 公司題目
- 001.餓了么
- 001.div垂直水平居中（flex、絕對定位）
- 002.React子父組件之間如何傳值
- 003.Emit事件怎么發，需要引入什么
- 004.介紹下React高階組件，和普通組件有什么區別
- 005.一個對象數組，每個子對象包含一個id和name，React如何渲染出全部的name
- 006.在哪個生命周期里寫
- 007.其中有幾個name不存在，通過異步接口獲取，如何做
- 008.渲染的時候key給什么值，可以使用index嗎，用id好還是index好
- 009.webpack如何配sass，需要配哪些loader
- 010.配css需要哪些loader
- 011.如何配置把js、css、html單獨打包成一個文件
- 012.監聽input的哪個事件，在什么時候觸發
- 013.兩個元素塊，一左一右，中間相距10像素
- 014.上下固定，中間滾動布局如何實現
- 016.取數組的最大值（ES5、ES6）
- 017.apply和call的區別
- 018.ES5和ES6有什么區別
- 019.some、every、find、filter、map、forEach有什么區別
- 020.上述數組隨機取數，每次返回的值都不一樣
- 021.如何找0-5的隨機數，95-99呢
- 022.頁面上有1萬個button如何綁定事件
- 023.如何判斷是button
- 024.頁面上生成一萬個button，并且綁定事件，如何做（JS原生操作DOM）
- 025.循環綁定時的index是多少，為什么，怎么解決
- 026.頁面上有一個input，還有一個p標簽，改變input后p標簽就跟著變化，如何處理
- 瀏覽器相關
- 001.性能優化
- 002.web安全
- 003.獲取瀏覽器大小
- 004.從輸入 URL 到頁面加載完成的過程中都發生了什么事情？
- 后端
- 001.分布式
- zuku
- 字節
- webpack
- webpack的打包原理是什么
- Webpack-- 常見面試題
- webscoket