ajax是什么？ 为什么要学？
ajax=异步js+xml，ajax实现客户端和服务端进行异步通信，实现页面的局部更新。
好处：
- 局部刷新，用户体验好
- 异步通信，加快了响应能力
- 减少冗余请求，减轻了服务器负担。
ajax原理就是：
通过xml对象向服务端发送异步请求，获取数据，通过js操作dom更新页面。
原生js ajax请求有几个步骤？分别是什么
//创建xmlhttprequest对象
- const ajax = new XMLHttpRequest()
//设置请求类型、地址、是否异步
- ajax.open('get',url,true)
//发送请求
//设置响应请求状态变化的函数
- ajax.onreadystatechange=function(){
if(ajax.readyState==4 && ajax.status==200)
}
readyState存储xmlhttprequest的状态
0未初始化
1服务器建立链接
2请求已接收
3请求处理中
4 请求已完成
拓展：
get/post区别
- get不安全，数据被显示在url中，post安全，不可见
- get传送数据少，post可传输大量数据
- get执行效率好
异步：
javascript是一门单线程语言,即一次只能完成一个任务,若有多个任务要执行,则必须排队按照队列来执行(前一个任务完成,再执行下一个任务)。
弊端：
执行效率低，会陷入死循环中，导致整个页面卡住。
为了解决这个问题，js将任务执行模式分为同步和异步。
异步任务是指不进入主线程，而进入任务队列的任务，只有任务队列通知主线程，某个异步任务可以执行了，该任务才会进入主线程，当我们打开网站时，像图片的加载，音乐的加载，其实就是一个异步任务
定时器、ajax请求、异步函数都是异步
前端异步解决方案：
1.promise
简单点说，它就是用于处理异步操作的，异步处理成功了就执行成功的操作，异步处理失败了就捕获错误或者停止后续操作。
new Promise(
/* executor */
function(resolve, reject) {
if (/* success */) {
// ...执行代码
resolve();
} else { /* fail */
// ...执行代码
reject();
}
}
);
异步对象的状态：
-
pending:初始状态,也称为未定状态，就是初始化Promise时，调用executor执行器函数后的状态。
-
fulfilled:完成状态，意味着异步操作成功。
-
rejected:失败状态，意味着异步操作失败。
promise的api方法：
- promise.then()
- promise.catch()
- promise.all() 接收一个参数，它必须是可以迭代的
Promise.all([p1,p2])
.then(()=>console.log('done'))
- promise.race() Promise.race()的状态变化不是全部受参数内的状态影响，一旦参数内有一个值的状态发生的改变，那么该Promise的状态就是改变的状态
Promise.race([p1, p2, p3]).then(function(data) {
// 显然p2更快，所以状态变成了fulfilled
// 如果p3更快，那么状态就会变成rejected
console.log(data); // p2 doned
}).catch(function(err) {
console.log(err); // 不执行
});
- promise.resolve()
- promise.reject()
-
var p10 = Promise.reject('手动拒绝');
p10.then(function(data) {
console.log(data); // 这里不会执行，因为是rejected态
}).catch(function(err) {
console.log(err); // 手动拒绝
}).then(function(data) {
// 不受上一级影响
console.log('状态：fulfilled'); // 状态：fulfilled
});
- 总之，除非Promise.then()方法内部抛出异常或者是明确置为rejected态，否则它返回的Promise的状态都是fulfilled态，即完成态，并且它的状态不受它的上一级的状态的影响。
2.generator函数
- 在function关键字后加一个* ， 那么这个函数就称之为generator函数
- 函数体有关键字 yield ， 后面跟每一个任务 ， 也可以有return关键字， 保留一个数据
- 通过next函数调用， 几个调用， 就是几个人任务执行
function* showWords() {
yield 'one';
yield 'two';
return 'three';
}
var show = showWords();
show.next() // {done: false, value: "one"}
show.next() // {done: false, value: "two"}
show.next() // {done: true, value: "three"}
show.next() // {value: underfined, done: true}
3.async await
函数前面的async一词意味着一个简单的事情：这个函数总是返回一个promise，如果代码中有return <非promise>语句，JavaScript会自动把返回的这个value值包装成promise的resolved值。
还有另一个关键词await，只能在async函数里使用，等待promise执行结束返回结果，才开始执行。
函数执行到（await）行会‘暂停’，不再往下执行,当promise处理完成后重新恢复运行
