异步函数

异步函数

异步概念——事件循环+异步队列(宏任务+微任务)

回调地狱是因为异步有序产生的

Ajax

发请求

1. 地址栏

2. 超链接

3. 表单(提交)

4. 一些标签(比如：link、script、img)

5. css的部分样式：请求资源

 

Ajax技术包括

XHTML和CSS技术、DOM技术、XML(JSON)技术和XSTL技术XMLHttpRequest对象及JavaScript技术等

其中：XHTML和CSS是属于Web标准化的呈现，DOM实现了动态的显示和交互，XML和XSTL实现数据交换和处理，XMLHttpRequest对象对于异步数据查询

 

ajax的核心：与服务器的异步通信、局部刷新页面

实现：

• 拿到核心对象：

  let xhr =new window.XMLHttpRequest;

• xhr.open("get","https://getman.cn/mock/get");   //打开链接

• xhr.send(); //发送请求

• 等待数据，并执行后续操作

  xhr.onreadystatechange = function () {

  if (xhr.readyState === 4 && xhr.status >= 200 && xhr.status <= 300) { 

  xx = JSON.parse(xhr.responseText);

  }

• 一般可以使用jQuery封装好的ajax方法；

   

         

 

promise

const p=new Promise((resolve,reject)=>{

})

 

• pending  待定，就绪

• fulfilled  完成，实现

• rejected 拒绝，驳回

1. promsie实例创建之初都是pending状态

2. 回调中使用resolve方法，状态转变成fulfilled

3. 回调中使用reject方法，状态转变成rejected

   注意！！！状态变化不可逆，且只能变化一次

 

p.then(

( )=>{

console.log("onfulfilled")

},

( )=>{  该监听器相当于异常处理，try...catch...无法处理异步函数。

console.log("onrejected")

}

)

1. then方法的返回值是一个pending状态的promise实例。

2. 该promise实例的状态变化受onfulfilled执行的影响

   1. 函数有一个普通的返回值

      promise实例会变成完成状态，并且返回值就是promiseValue

   2. 返回值是promise实例，该promise实例与then的promise实例保持同步(与then返回值同步)

   3. 返回一个thenable对象

   4. 如果报错，promise实例变成拒绝状态

3. 方法(异步异常一般方式抓不住)

   • catch

   • finally

 

ES7：async&await(无论什么函数在前面加async就会变成异步)

1. 异步函数的返回值是一个promise实例，其状态变化规则参见then方法；

2. await用于异步函数内部，用来等待异步操作的结果，其规则参见then方法；

 

=======================================================================================

 

补充：

• all

• race

• remove