1.Promise
作為一些場景必須要使用的一個對象，比如說我們要發(fā)送一個請求，但是在發(fā)送這個請求之前我們需要以另一個請求返回的結果中的一個數(shù)據(jù)作為這次請求的參數(shù)，也就是說這個請求必須在另一個請求后面，當然我們用setTimeout定時器寫一個延時函數(shù)也可以，但是當有很多請求的時候回造成一層套一層形成回調(diào)地獄。
直接上代碼，代碼里面注釋寫的很清楚
<script>
// 注:下面的.then的err是因為then()有兩個參數(shù)
// then((res)=>{},(err)=>{})兩個參數(shù)都是函數(shù)一個是Promise成功的一個是失敗的
const pr = new Promise(function (resolve, reject) {//這個地方一般用箭頭函數(shù)
resolve('第一次成功') //成功的時候會給.then一個結果數(shù)據(jù)
//reject('失敗的信息') //失敗的時候會給.catch一個結果數(shù)據(jù)
}).then(res => {
console.log('拿到第一次成功的結果:' + res) //這里的res就是 成功
//我們拿到第一層成功的結果可以繼續(xù)在里面執(zhí)行下一步操作
return new Promise((resolve, reject) => {
resolve('第二次成功')
//這個地方我們又拿到成功的需要再去.then拿到這次成功的結果
})
}, err => {
//我們可能每一次失敗都要進行不同的處理，就可以給每一個.then加上錯誤處理
console.log('第一次失敗' + err)
throw new Error('報錯') //報錯了下面的代碼就不執(zhí)行了
}).then(res => {
console.log('第二次成功拿到結果:' + res)
}, err => {
console.log('第二次失敗' + err)
}).catch(err => {
console.log(err) //這里的err 就是是失敗
})
//pending 等待狀態(tài)
</script>
2.Async/await
這個是基于Promise進行優(yōu)化的，因為Promise雖然解決了回調(diào)地獄但是其是鏈式調(diào)用，會寫起來很長也不是很方便后期維護，Async/await就是Promise的升級版。
<script>
//Async/await
//步驟1：準備一個返回promise對象的函數(shù)
function asyncTask(){
return new Promise((resolve,reject)=>{
let isSuccess=true
if(isSuccess){
resolve('任務3的成功處理結果')
}else{
reject('任務3的失敗處理結果')
}
})
}
async function main(){
console.log('任務1')
const pr1=await asyncTask()
//這里只等待了一個如果還有繼續(xù)寫
//const pr2=await asyncTask2()
console.log(pr1);
console.log('任務2');
}
main()
</script>
3.Proxy對象代理
這個就是表面意思，使用一個對象去代替另一個對象進行一些操作，主要用于框架的封裝比如VUE3，vue2中用的就是Object.defineProperty()也是數(shù)據(jù)渲染的底層。
舉例說吧，我們有一個數(shù)據(jù)存儲在對象中，我們想把這個數(shù)據(jù)渲染到頁面很簡單，但是我們需要做到當修改數(shù)據(jù)的時候頁面中顯示也跟著改變，聽起來是不是很熟悉沒錯就是vue中的雙向綁定數(shù)據(jù)的原理。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="container"></div>
</body>
<script>
//編寫一個對象，把對象的屬性顯示到頁面上，再進行對對象的屬性修改時頁面跟隨變化
const obj = {
name: '一號',
age: 18
}
const container = document.getElementById('container');
// console.log(container);
// textContent和innerHTML類似
//我們現(xiàn)在對obj.name修改發(fā)現(xiàn)修改后頁面并不變化需要從新渲染
//obj.name = '二號'; //雖然數(shù)據(jù)變了，但是頁面沒有變化需要從新渲染
//container.textContent=obj.name; //從新渲染才可以
//第二種 使用代理Proxy
//我們使用代理就可以解決這個問題
//兩個參數(shù) 第一個 代理的哪一個對象，第二個一個對象包含函數(shù)
const p1 = new Proxy(obj, {
get(target, property, receiver) {
// 數(shù)據(jù)對象 屬性名 Proxy實例
//獲取的時候
//obj[property] 就是獲取對象中的所有屬性
return obj[property]
},
set(target, property, value, receiver) {
// 數(shù)據(jù)對象 屬性名 修改的值 Proxy實例
//修改的時候
obj[property] = value
container.textContent = obj.name;
}
})
console.log(p1.name);
p1.name='三號'
</script>
</html>
上面的代碼就是舉得例子，以前自己也不懂雙向數(shù)據(jù)的原理(只會背八股文不知道底層怎么實現(xiàn)的)，現(xiàn)在看到proxy恍然大悟。文章來源：http://www.zghlxwxcb.cn/news/detail-521414.html
總結
代碼千千萬，適合自己最重要。歡迎大家評論指出錯誤和不足。文章來源地址http://www.zghlxwxcb.cn/news/detail-521414.html
到了這里，關于ES6中Promise、Async/await解決回調(diào)地獄、Proxy代理的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
