1.什么是 es6？
是 ECMAScript 的第六个版本 在 es5 的基础上新增加了一些语法
js 分成三部分 dom（文档对象模型） bom（浏览器对象模型） ECMAScript（js 语法）
2.promise概念？
promise 是 es6 提供的一种异步解决方案，在我的理解中 promise 就是把异步操作换了一种写法
从之前的嵌套回调函数 变成了链式的写法
promise 本身其实就是一个容器 里面放异步的代码 这样就可以让这个异步的代码执行.then .catch 的操作
2.1. 说⼀下你对promise的理解?
promise 是 es6 提供的一种异步解决方案，在我的理解中 promise 就是把异步操作换了一种写法
从之前的嵌套回调函数 变成了链式的写法
2.2. 什么是promise?通过promise能够解决什么问题?
promise 是 es6 提供的一种异步解决方案，
promise 可以解决回调地狱的问题
回调地狱就是拿到 a 接口的数据后才能根据 a 返回的数据请求 b 接口
这样回调函数嵌套回调函数的写法就叫回调地狱
这种写法会让代码臃肿 并且后期难以维护
除了 promise 之外 async 是解决回调地狱的最终方案
<script src="JQuery.js"></script>
<script>
// 拿到a的数据后才去请求b，拿到b的数据后再去请求c 这就叫回调地狱
// 像这种回调嵌套回调的写法就叫回调地狱
$.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本身就是一个promise对象
$.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 的方法处理回调地狱
// es7的时候出了一个async和await 是解决回调地狱的终极方案
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函数return的永远是一个promise对象
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拿到的数据", res);
})
//用generator处理回调地狱 但是这种写法一般不用因为async已经取代了generotor
</script>
2.3. 说⼀下 promise 的特点?也就是三种状态?
promise ⼀共有三个状态,分别是进⾏中,成功或者失败 如何成功的话可以通过 resolve ⽅法将正确结
果返回出去,通过.then 的⽅式进⾏接受,失败的话可以通过 reject 的⽅式将失败的结果返回出去,通 过.catch 的⽅式进⾏接受,pending 状态是进⾏中,⼀旦进⾏之后,他的状态是不可逆的
2.4. 说⼀下 promise 怎么⽤?
如果要使⽤ promise,我们需要对 promise 进⾏实例化,在实例化的构造函数⾥⾯有⼀个回调函数,这个
回调函数⾥⾯有两个参数,分别是 resolve 和 reject,我们可以通过 promise 的实例化对象调⽤.then 或 者.catch ⽅式接受结果
<script>
//封装 promise
let xhr = new XMLHttpRequest();
//第一步创建xhr对象
xhr.open("get", "./data.json", true);
//第二步：设置请求的基本信息 如果是post请求在这里要设置一个头信息
// get方式传参是在路径后面？ 拼接 而post是在send里传
// 第三个参数 可以控制异步同步 true就是异步
xhr.send();
//第三步：向服务器发送链接
// xhr.onreadystatechange = function() {
// console.log(xhr.readyState);
// if (xhr.readyState == 4 && xhr.status == 200) {
// console.log(xhr.responseText);
// }
// };
// 第四步 在xhr对象和服务器都响应成功的时候拿到数据
// 可以用onreadystatechange 事件这个事件的意思是 只要xhr的状态发生改变就会触发 需要判断xhr的状态为4 服务器的状态为200 就代表都准备好了 我们就可以拿到数据了
// 也可以用下面的onload事件代替 onload本身就代表xhr对象已经准备好了 所以我们只需要判断服务器的状态是200就可以拿到数据了
// responseText就是拿到的数据
xhr.onload = () => {
if (xhr.status == 200) {
// console.log(xhr.responseText);
} else {}
};
//onload事件在js中是加载完成
// 把上面的原生js请求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("请求失败");
}
};
});
}
//把异步请求放进promise容器中 就变成一种promise的写法 then就执行成功的resolve回调cathc就执行失败的reject回调
js_ajax({
method: "get",
url: "./data.json",
})
.then((res) => {
console.log(res);
})
.catch((err) => {
console.log(err);
});
// js封装的promise处理回调地狱的写法
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. 我们之前遇到的哪些东西本身就是一个 promise 对象？
jq 的 ajax 请求本身就是一个 promise 对象 所以可以直接用.then
axios 也是一个 promise 对象
原生的 ajax 以及 小程序的 wx.request 请求都不是 promise 对象 不能用。then 的写法，如果想用链式写法 就要自己封装一个 promise
3.promise 的 all 和 race 方法
promise 还给我们提供了.all 和 race, 其中 all ⽅法的作⽤是将多个请求合并成⼀个请求, ⽐如当⾸⻚
要请求 10 个接⼝,我们可以 promise.all 进⾏合并,.race 的作⽤也可以将多个请求合并成⼀个请求,不过
是谁先请求成功就先返回谁.
<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;
//解构数组
console.log(data, data2, data3);
}).catch(err => {
console.log(err);
})
//all方法可以并发请求 同时发送多个请求 当所有的请求都成功的时候才会执行then方法 res是一个数组 放的就是请求到的数据
Promise.race([
$.ajax({
url: "data.json",
}),
$.ajax({
url: "data2.json",
}),
$.ajax({
url: "data3.json",
}),
]).then((res) => {
console.log(res);
});
// race方法 也是执行多个请求 谁先请求成功就会执行then方法并且得到请求到的数据
</script>
4.说⼀下 async 和 await、以及他们和 promise 的区别?
⾸先 async 和 await 是解决异步的终极⽅案,async 和 await ⼀般配和使⽤,当我
们给函数前⾯加上关键字 async,这个时候,这个函数的返回值就是⼀个 promise. ⽽ await 是⼀个同步
的操作,await 只能配合 async 只能,不然会报错,await 后⾯可以是表达式,也可以是⼀个 promise,在
await 下⾯的代码必须得等待 await 执⾏完之后才能在执⾏
他们和 promise 的区别就是在写法上更加的简洁.
以上就是我对 async 和 await 的理解.
5.generator 函数
generator 函数也是 es6 的处理异步回调的一种写法 但是这种写法现在被 async 取代了
generator 函数 用*表示 跟 yield 搭配使用
6.说⼀下 var 、let、const 之间的区别
- let var 是声明变量的 const 是声明常量的
- var 声明的变量会声明提升 但是 const 和 let 不会 （声明提升就是声明的变量会把声明语句提到作用域的顶端 但是赋值语句留在原地）
- var 在全局作⽤域下声明变量会导致变量挂载在 window 上，其他两者不会
- let 和 const 声明的是块级作用域 var 声明的是函数作用域
块级作用域：只要是大括号就能区分作用域
函数作用域： 只有函数才能区分作用域
<script>
// console.log(num);
var num = 10;
// var 声明的变量会把声明语句提到作用域的顶端 但是赋值语句留在原地
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);
// 变量的作用域的概念就是 变量可以活动的范围 出了这个作用域 就没有这个变量了
// var 变量的作用域是函数作用域 也就是说只有函数的{}能区别var变量的作用域别的都不行
// let const 块级作用域 只要看到{}就是一个作用域
{
let data = "大怨种";
var data2 = "小怨种";
}
console.log(data2);
console.log(data);
</script>
