ajax+异步promise+async+await

ajax是什么？ 为什么要学？

ajax=异步js+xml，ajax实现客户端和服务端进行异步通信，实现页面的局部更新。

好处：

1. 局部刷新，用户体验好
2. 异步通信，加快了响应能力
3. 减少冗余请求，减轻了服务器负担。

ajax原理就是：

通过xml对象向服务端发送异步请求，获取数据，通过js操作dom更新页面。

原生js ajax请求有几个步骤？分别是什么

//创建xmlhttprequest对象 

• const ajax = new XMLHttpRequest()

//设置请求类型、地址、是否异步

• ajax.open('get',url,true)

//发送请求

• ajax.send()

//设置响应请求状态变化的函数

• ajax.onreadystatechange=function(){

if(ajax.readyState==4 && ajax.status==200)

}

readyState存储xmlhttprequest的状态

0未初始化

1服务器建立链接

2请求已接收

3请求处理中

4 请求已完成

拓展：

get/post区别

1. get不安全，数据被显示在url中，post安全，不可见
2. get传送数据少，post可传输大量数据
3. 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处理完成后重新恢复运行