1.什么是 es6蕾各？
是 ECMAScript 的第六個(gè)版本 在 es5 的基礎(chǔ)上新增加了一些語(yǔ)法
js 分成三部分 dom（文檔對(duì)象模型） bom（瀏覽器對(duì)象模型） ECMAScript（js 語(yǔ)法）
2.promise概念？
promise 是 es6 提供的一種異步解決方案庆揪，在我的理解中 promise 就是把異步操作換了一種寫法
從之前的嵌套回調(diào)函數(shù) 變成了鏈?zhǔn)降膶懛?br>
promise 本身其實(shí)就是一個(gè)容器 里面放異步的代碼 這樣就可以讓這個(gè)異步的代碼執(zhí)行.then .catch 的操作
2.1. 說(shuō)?下你對(duì)promise的理解?
promise 是 es6 提供的一種異步解決方案式曲，在我的理解中 promise 就是把異步操作換了一種寫法
從之前的嵌套回調(diào)函數(shù) 變成了鏈?zhǔn)降膶懛?/p>
2.2. 什么是promise?通過(guò)promise能夠解決什么問(wèn)題?
promise 是 es6 提供的一種異步解決方案，
promise 可以解決回調(diào)地獄的問(wèn)題
回調(diào)地獄就是拿到 a 接口的數(shù)據(jù)后才能根據(jù) a 返回的數(shù)據(jù)請(qǐng)求 b 接口
這樣回調(diào)函數(shù)嵌套回調(diào)函數(shù)的寫法就叫回調(diào)地獄
這種寫法會(huì)讓代碼臃腫 并且后期難以維護(hù)
除了 promise 之外 async 是解決回調(diào)地獄的最終方案
<script src="JQuery.js"></script>
<script>
// 拿到a的數(shù)據(jù)后才去請(qǐng)求b，拿到b的數(shù)據(jù)后再去請(qǐng)求c 這就叫回調(diào)地獄
// 像這種回調(diào)嵌套回調(diào)的寫法就叫回調(diào)地獄
$.ajax({
method: "get",
url: "data.json",
success(res) {
console.log(res);
$.ajax({
method: "get",
url: "data2.json",
success(res) {
console.log(res);
$.ajax({
method: "get",
url: "data3.json",
success(res) {
console.log(res);
},
});
},
});
},
});
//jq的ajax本身就是一個(gè)promise對(duì)象
$.ajax({
method: "get",
url: "data.json",
})
.then((res) => {
console.log(res);
return $.ajax({
method: "get",
url: "data2.json",
});
})
.then((res) => {
console.log(res);
return $.ajax({
method: "get",
url: "data3.json",
});
})
.then((res) => {
console.log(res);
console.log("最終拿到的", res);
});
//用promise 的方法處理回調(diào)地獄
// es7的時(shí)候出了一個(gè)async和await 是解決回調(diào)地獄的終極方案
async function getdata() {
let data = await $.ajax({
method: "get",
url: "data.json"
});
console.log(data);
let data2 = await $.ajax({
method: "get",
url: "data2.json"
});
console.log(data2);
let data3 = await $.ajax({
method: "get",
url: "data3.json",
});
console.log(data3);
return data3;
}
// async函數(shù)return的永遠(yuǎn)是一個(gè)promise對(duì)象
getdata().then((res) => {
console.log(res);
});
function handler() {
let data = ""
$.ajax({
method: "get",
url: "data.json",
success(res) {
data = res;
}
});
console.log(data);
}
handler()
function* getdata2() {
yield $.ajax({
method: "get",
url: "data.json"
})
yield $.ajax({
method: "get",
url: "data2.json"
})
yield $.ajax({
method: "get",
url: "data3.json"
})
}
let obj = getdata2();
obj.next().value.then(res => {
console.log(res);
return obj.next().value
}).then(res => {
console.log(res);
return obj.next().value
}).then(res => {
console.log("generator拿到的數(shù)據(jù)", res);
})
//用generator處理回調(diào)地獄 但是這種寫法一般不用因?yàn)閍sync已經(jīng)取代了generotor
</script>
2.3. 說(shuō)?下 promise 的特點(diǎn)?也就是三種狀態(tài)?
promise ?共有三個(gè)狀態(tài),分別是進(jìn)?中,成功或者失敗 如何成功的話可以通過(guò) resolve ?法將正確結(jié)
果返回出去,通過(guò).then 的?式進(jìn)?接受,失敗的話可以通過(guò) reject 的?式將失敗的結(jié)果返回出去,通 過(guò).catch 的?式進(jìn)?接受,pending 狀態(tài)是進(jìn)?中,?旦進(jìn)?之后,他的狀態(tài)是不可逆的
2.4. 說(shuō)?下 promise 怎么??
如果要使? promise,我們需要對(duì) promise 進(jìn)?實(shí)例化,在實(shí)例化的構(gòu)造函數(shù)??有?個(gè)回調(diào)函數(shù),這個(gè)
回調(diào)函數(shù)??有兩個(gè)參數(shù),分別是 resolve 和 reject,我們可以通過(guò) promise 的實(shí)例化對(duì)象調(diào)?.then 或 者.catch ?式接受結(jié)果
<script>
//封裝 promise
let xhr = new XMLHttpRequest();
//第一步創(chuàng)建xhr對(duì)象
xhr.open("get", "./data.json", true);
//第二步：設(shè)置請(qǐng)求的基本信息 如果是post請(qǐng)求在這里要設(shè)置一個(gè)頭信息
// get方式傳參是在路徑后面吝羞？ 拼接 而post是在send里傳
// 第三個(gè)參數(shù) 可以控制異步同步 true就是異步
xhr.send();
//第三步：向服務(wù)器發(fā)送鏈接
// xhr.onreadystatechange = function() {
// console.log(xhr.readyState);
// if (xhr.readyState == 4 && xhr.status == 200) {
// console.log(xhr.responseText);
// }
// };
// 第四步 在xhr對(duì)象和服務(wù)器都響應(yīng)成功的時(shí)候拿到數(shù)據(jù)
// 可以用onreadystatechange 事件這個(gè)事件的意思是 只要xhr的狀態(tài)發(fā)生改變就會(huì)觸發(fā) 需要判斷xhr的狀態(tài)為4 服務(wù)器的狀態(tài)為200 就代表都準(zhǔn)備好了 我們就可以拿到數(shù)據(jù)了
// 也可以用下面的onload事件代替 onload本身就代表xhr對(duì)象已經(jīng)準(zhǔn)備好了 所以我們只需要判斷服務(wù)器的狀態(tài)是200就可以拿到數(shù)據(jù)了
// responseText就是拿到的數(shù)據(jù)
xhr.onload = () => {
if (xhr.status == 200) {
// console.log(xhr.responseText);
} else {}
};
//onload事件在js中是加載完成
// 把上面的原生js請(qǐng)求ajax的普通寫法變成promise的寫法
function js_ajax(params) {
return new Promise((resolve, reject) => {
let xhr = new XMLHttpRequest();
xhr.open(params.method, params.url, true);
xhr.send();
xhr.onload = () => {
if (xhr.status == 200) {
let res = JSON.parse(xhr.responseText);
resolve(res);
} else {
reject("請(qǐng)求失敗");
}
};
});
}
//把異步請(qǐng)求放進(jìn)promise容器中 就變成一種promise的寫法 then就執(zhí)行成功的resolve回調(diào)cathc就執(zhí)行失敗的reject回調(diào)
js_ajax({
method: "get",
url: "./data.json",
})
.then((res) => {
console.log(res);
})
.catch((err) => {
console.log(err);
});
// js封裝的promise處理回調(diào)地獄的寫法
js_ajax({
method: "get",
url: "./data.json",
})
.then((res) => {
console.log(res);
return js_ajax({
method: "get",
url: "./data2.json",
});
})
.then((res) => {
console.log(res);
return js_ajax({
method: "get",
url: "./data3.json",
});
})
.then((res) => {
console.log(res);
});
</script>
2.5. 我們之前遇到的哪些東西本身就是一個(gè) promise 對(duì)象兰伤？
jq 的 ajax 請(qǐng)求本身就是一個(gè) promise 對(duì)象 所以可以直接用.then
axios 也是一個(gè) promise 對(duì)象
原生的 ajax 以及 小程序的 wx.request 請(qǐng)求都不是 promise 對(duì)象 不能用。then 的寫法钧排，如果想用鏈?zhǔn)綄懛?就要自己封裝一個(gè) promise
3.promise 的 all 和 race 方法
promise 還給我們提供了.all 和 race, 其中 all ?法的作?是將多個(gè)請(qǐng)求合并成?個(gè)請(qǐng)求, ?如當(dāng)??
要請(qǐng)求 10 個(gè)接?,我們可以 promise.all 進(jìn)?合并,.race 的作?也可以將多個(gè)請(qǐng)求合并成?個(gè)請(qǐng)求,不過(guò)
是誰(shuí)先請(qǐng)求成功就先返回誰(shuí).
<script src="./JQuery.js"></script>
<script>
Promise.all([
$.ajax({
url: "data.json",
}),
$.ajax({
url: "data2.json",
}),
$.ajax({
url: "data3.json",
}),
]).then((res) => {
// console.log(res);
let [data, data2, data3] = res;
//解構(gòu)數(shù)組
console.log(data, data2, data3);
}).catch(err => {
console.log(err);
})
//all方法可以并發(fā)請(qǐng)求 同時(shí)發(fā)送多個(gè)請(qǐng)求 當(dāng)所有的請(qǐng)求都成功的時(shí)候才會(huì)執(zhí)行then方法 res是一個(gè)數(shù)組 放的就是請(qǐng)求到的數(shù)據(jù)
Promise.race([
$.ajax({
url: "data.json",
}),
$.ajax({
url: "data2.json",
}),
$.ajax({
url: "data3.json",
}),
]).then((res) => {
console.log(res);
});
// race方法 也是執(zhí)行多個(gè)請(qǐng)求 誰(shuí)先請(qǐng)求成功就會(huì)執(zhí)行then方法并且得到請(qǐng)求到的數(shù)據(jù)
</script>
4.說(shuō)?下 async 和 await敦腔、以及他們和 promise 的區(qū)別?
?先 async 和 await 是解決異步的終極?案,async 和 await ?般配和使?,當(dāng)我
們給函數(shù)前?加上關(guān)鍵字 async,這個(gè)時(shí)候,這個(gè)函數(shù)的返回值就是?個(gè) promise. ? await 是?個(gè)同步
的操作,await 只能配合 async 只能,不然會(huì)報(bào)錯(cuò),await 后?可以是表達(dá)式,也可以是?個(gè) promise,在
await 下?的代碼必須得等待 await 執(zhí)?完之后才能在執(zhí)?
他們和 promise 的區(qū)別就是在寫法上更加的簡(jiǎn)潔.
以上就是我對(duì) async 和 await 的理解.
5.generator 函數(shù)
generator 函數(shù)也是 es6 的處理異步回調(diào)的一種寫法 但是這種寫法現(xiàn)在被 async 取代了
generator 函數(shù) 用*表示 跟 yield 搭配使用
6.說(shuō)?下 var 、let恨溜、const 之間的區(qū)別
- let var 是聲明變量的 const 是聲明常量的
- var 聲明的變量會(huì)聲明提升 但是 const 和 let 不會(huì) （聲明提升就是聲明的變量會(huì)把聲明語(yǔ)句提到作用域的頂端 但是賦值語(yǔ)句留在原地）
- var 在全局作?域下聲明變量會(huì)導(dǎo)致變量掛載在 window 上符衔，其他兩者不會(huì)
- let 和 const 聲明的是塊級(jí)作用域 var 聲明的是函數(shù)作用域
塊級(jí)作用域：只要是大括號(hào)就能區(qū)分作用域
函數(shù)作用域： 只有函數(shù)才能區(qū)分作用域
<script>
// console.log(num);
var num = 10;
// var 聲明的變量會(huì)把聲明語(yǔ)句提到作用域的頂端 但是賦值語(yǔ)句留在原地
function fun1() {
// console.log(str);
var str = "aaa";
}
// console.log(str);
// console.log(num2);
let num2 = 20;
// console.log(window.num);
// console.log(window.num2);
// 變量的作用域的概念就是 變量可以活動(dòng)的范圍 出了這個(gè)作用域 就沒(méi)有這個(gè)變量了
// var 變量的作用域是函數(shù)作用域 也就是說(shuō)只有函數(shù)的{}能區(qū)別var變量的作用域別的都不行
// let const 塊級(jí)作用域 只要看到{}就是一個(gè)作用域
{
let data = "大怨種";
var data2 = "小怨種";
}
console.log(data2);
console.log(data);
</script>
