深淺克隆和Promise異步編程-有解無憂

深克隆和淺克隆

淺克隆

arr.slice(0)
arr.concat()
let obj2 = {... obj}

深克隆

function deepClone(obj){
    //判斷引數是不是一個物件
    let objClone = new obj.constructor();
    if(obj && typeof obj==="object"){
        for(key in obj){
            if(obj.hasOwnProperty(key)){
                //判斷ojb子元素是否為物件，如果是，遞回復制
                if(obj[key]&&typeof obj[key] ==="object"){
                    objClone[key] = deepClone(obj[key]);
                }else{
                    //如果不是，簡單復制
                    objClone[key] = obj[key];
                }
            }
        }
    }
    return objClone;
}

Promise詳解

區域地獄

回呼地獄：上一個回呼函式中繼續做事情，而且繼續回呼（在真實專案的AJAX請求中經常出現回呼地獄）=>異步請求、不方便代碼的維護

Promise的誕生就是為了解決異步請求中的回呼地獄問題：它是一種設計模式，ES6中提供了一個JS內置類Promise，來實作這種設計模式

 function ajax1() {
	return new Promise(resolve => {
		$.ajax({
			url: '/student',
			method: 'get',
			data: {
				class: 1
			},
			success: resolve
		});
	});
}

function ajax2(arr) {
	return new Promise(resolve => {
		$.ajax({
			url: '/score',
			method: 'get',
			data: {
				stuId: arr
			},
			success: resolve
		});
	});
}

function ajax3() {
	return new Promise(resolve => {
		$.ajax({
			url: '/jige',
			// ...
			success: resolve
		});
	});
}


 ajax1().then(result => {
	return ajax2(result.map(item => item.id));
}).then(result => {
	return ajax3();
}).then(result => {

});

PROMISE是用來管理異步編程的，它本身不是異步的：new
Promise的時候會立即把executor函式執行（只不過我們一般會在executor函式中處理一個異步操作）
PROMISE本身有三個狀態 =>[[PromiseStatus]]
- pending 初始狀態
- fulfilled 代表操作成功（resolved）
- rejected 代表當前操作失敗

new Promise的時候先執行executor函式，在這里開啟了一個異步操作的任務（此時不等：把其放入到EventQuque任務佇列中），繼續執行

p1.then基于THEN方法，存盤起來兩個函式（此時這兩個函式還沒有執行）；當executor函式中的異步操作結束了，基于resolve/reject控制Promise狀態，從而決定執行then存盤的函式中的某一個

let p1 = new Promise((resolve, reject) => {
	setTimeout(_ => {
		let ran = Math.random();
		console.log(ran);
		if (ran < 0.5) {
			reject('NO!');
			return;
		}
		resolve('OK!');
	}, 1000);
});

THEN：設定成功或者失敗后處理的方法
THEN方法結束都會回傳一個新的Promise實體（THEN鏈）

p1.then(result => {
console.log(`成功：` + result);
}, reason => {
	console.log(`失敗：` + reason);
});

p2/p3這種每一次執行then回傳的新實體的狀態，由then中存盤的方法執行的結果來決定最后的狀態（上一個THEN中某個方法執行的結果，決定下一個then中哪一個方法會被執行）
=>不論是成功的方法執行，還是失敗的方法執行（THEN中的兩個方法），凡是執行拋出了例外，則都會把實體的狀態改為失敗
=>方法中如果回傳一個新的PROMISE實體，回傳這個實體的結果是成功還是失敗，也決定了當前實體是成功還是失敗
=>剩下的情況基本上都是讓實體變為成功的狀態（方法回傳的結果是當前實體的value值：上一個then中方法回傳的結果會傳遞到下一個then的方法中）

		 let p1 = new Promise((resolve, reject) => {
			resolve(100);
		});
		let p2 = p1.then(result => {
			console.log('成功：' + result);
			return result + 100;
		}, reason => {
			console.log('失敗：' + reason);
			return reason - 100;
		});
		let p3 = p2.then(result => {
			console.log('成功：' + result);
		}, reason => {
			console.log('失敗：' + reason);
		});

TEHN中也可以只寫一個或者不寫函式
- .then(fn)
- .then(null,fn)

遇到一個THEN，要執行成功或者失敗的方法，如果此方法并沒有在當前THEN中被定義，則順延到下一個對應的函式

Promise.all(arr)：回傳的結果是一個PROMISE實體（ALL實體），要求ARR陣列中的每一項都是一個新的PROMIE實體，
PROMISE.ALL是等待所有陣列中的實體狀態都為成功才會讓“ALL實體”狀態為成功，VALUE是一個集合，存盤著ARR中每一個實體回傳的結果；凡是ARR中有一個實體狀態為失敗，“ALL實體”的狀態也是失敗
Promise.race(arr)：和ALL不同的地方，RACE是賽跑，也就是ARR中不管哪一個先處理完，處理完的結果作為“RACE實體”的結果

async / await

AWAIT會等待當前PROMISE的回傳結果，只有回傳的狀態是RESOLVED情況，才會把回傳結果賦值給RESULT
AWAIT不是同步編程，是異步編程（微任務）:當代碼執行到此行（先把此行），構建一個異步的微任務（等待PROMISE回傳結果，并且AWAIT下面的代碼也都被列到任務佇列中），

async function fn() {
	console.log(1);
	let result = await p2;
	console.log(result);

	let AA = await p1;
	console.log(AA);
}
fn();
console.log(2); */

如果PROMISE是失敗狀態，則AWAIT不會接收其回傳結果，AWAIT下面的代碼也不會在繼續執行（AWAIT只能處理PROMISE為成功狀態的時候）

 async function fn() {
	let reason = await p3;
	console.log(reason);
}
fn(); */

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/77943.html

標籤：JavaScript

上一篇：JavaScript連載14-函式以及arguments決議

下一篇：JavaScript的內置物件