js处理异步的几种方式

同步、异步

1.造成原因：js是单线程的语言

2.概念：

• 同步任务：实时处理 在主线程上排队执行的任务，按照先后顺序执行
• 异步任务：分时处理 不进入主线程、而进入"任务队列"的任务，只有等主线程任务执行完毕，"任务队列"开始通知主线程，请求执行任务，该任务才会进入主线程执行
• 异步模式可以一起执行多个任务

3.js处理异步的几种方式

1. 底层原理

XML 的英文全称是 EXtensible Markup Language，即可扩展标记语言。

1.1 使用xhr发起GET请求

// 1. 创建 XHR 对象
var xhr = new XMLHttpRequest()
// 2. 调用 open 函数
xhr.open('GET', 'http://www.shanshan.top:3006/api/getlist?id=1&list=统计') //?id=1查询字符串
// 3. 调用 send 函数
xhr.send()
// 4. 监听 onreadystatechange 事件
xhr.onreadystatechange = function () {
    当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
  if (xhr.readyState === 4 && xhr.status === 200) {
     // 获取服务器响应的数据
     console.log(xhr.responseText)
   }
}

1.2 使用xhr发起POST请求

// 1. 创建 xhr 对象
var xhr = new XMLHttpRequest()
// 2. 调用 open 函数
xhr.open('POST', 'http://www.shanshan.top:3006/api/addlist')
// 3. 设置 Content-Type 属性（固定写法）
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 4. 调用 send 函数
xhr.send('bookname=三毛&author=张三&publisher=本地图书出版社')
// 5. 监听事件
//onreadystatechange 存储函数，每当 readyState 属性改变时，就会调用该函数
xhr.onreadystatechange = function () {
   // 对象的 readyState 属性，用来表示当前 Ajax 请求所处的状态 
   // 当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
  if (xhr.readyState === 4 && xhr.status === 200) {
      // 获取服务器响应的数据
    console.log(xhr.responseText)
  }
}

1.3 FormData对象管理表单数据

Ajax 操作往往用来提交表单数据。为了方便表单处理，HTML5 新增了一个 FormData 对象，可以模拟表单操作：

 // 1. 新建 FormData 对象
 var fd = new FormData()
 // 2. 为 FormData 添加表单项
 fd.append('uname', 'zs')
 fd.append('upwd', '123456')
 // 3. 创建 XHR 对象
 var xhr = new XMLHttpRequest()
 // 4. 指定请求类型与URL地址
 xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata')
 // 5. 直接提交 FormData 对象，这与提交网页表单的效果，完全一样
 xhr.send(fd)

FormData对象也可以用来获取网页表单的值，示例代码如下：

// 获取表单元素
var form = document.querySelector('#form1')
// 监听表单元素的 submit 事件
form.addEventListener('submit', function(e) {
 e.preventDefault()
 // 根据 form 表单创建 FormData 对象，会自动将表单数据填充到 FormData 对象中
 var fd = new FormData(form)
 var xhr = new XMLHttpRequest()
 xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata')
 xhr.send(fd)
 xhr.onreadystatechange = function() {}
})

2. 原生ajax

2.1 jQuery中的Ajax

$.ajax({
    type:'GET',    //请求方式
    url:'http://www.shanshan.top:3006/api/getlist',   //请求的url地址
    data:{id:1},   //这次请求需携带的参数
    success:function(res){    //请求成功之后的回调函数
        console.log(res)      //res 后台返回的数据
    }
})

$.ajax({
    type:'POST',
    url:'http://www.shanshan.top:3006/api/addlist',
    data:{
        name:'张三',
        sex:'男'
    },
    success:function(res){
        console.log(res)
    }
})

2.2 通过Ajax提交表单数据

<from id="from1">
        <input type="text" name="username">
        <input type="password" name="password">
        <button type="submit">提交</button>
</from>

<script>
   $('#from1').submit(function (e) {
      e.preventDefault() //阻止表单的默认提交和页面的跳转
       var data = $(this).serialize() //一次性获取表单的数据，必须为每个表单元素添加 name 属性
    })
</script>

多次调用ajax时，不是按照书写ajax代码的顺序返回结果，如果存在依赖关系就需要嵌套，会造成回调地狱

 $.ajax({
      url: 'http://localhost:3000/data',
      success: function(data) {
        console.log(data)
        $.ajax({
          url: 'http://localhost:3000/data1',
          success: function(data) {
            console.log(data)
            $.ajax({
              url: 'http://localhost:3000/data2',
              success: function(data) {
                console.log(data)
              }
            });
          }
        });
      }
    });

3. promise对象主要解决异步深层嵌套造成回调地狱的问题--es6

promise对象是一个构造函数，用来生成Promise实例

3.1 基本用法

function timeout() {
     var p = new Promise(function(resolve,reject){
     //异步操作
        setTimeout(function(){
        var flag = false;
        if(flag) {
          //3.失败时调用resolve()
          resolve('hello');
        }else{
          //4.成功是调用reject()
          reject('出错了');
        }
      }, 100);
      });
     return p
}
//p.then获取处理结果
p.then(function(ret){
  从resolve得到的正常结果
},function(ret){
   从reject得到的错误信息
})

3.2 基于Promise发送Ajax请求

 <script type="text/javascript">
    /*
      基于Promise发送Ajax请求
    */
    function queryData(url) {
     #   1.1 创建一个Promise实例
      var p = new Promise(function(resolve, reject){
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
          if(xhr.readyState != 4) return;
          if(xhr.readyState == 4 && xhr.status == 200) {
            # 1.2 处理正常的情况
            resolve(xhr.responseText);
          }else{
            # 1.3 处理异常情况
            reject('服务器错误');
          }
        };
        xhr.open('get', url);
        xhr.send(null);
      });
      return p;
    }
    
    #发送多个ajax请求并且保证顺序

    多个ajax任务通过 .then 的方式变成了线性关系，保证的执行的顺序
    queryData('http://localhost:3000/data')
      .then(function(data){
        console.log(data)
        //return的是一个新的Promise对象，下一个then的调用者就是上一个return出来的Promise对象
        return queryData('http://localhost:3000/data1'); 
      })
      .then(function(data){     //data接收上一个异步任务返回的结果
        console.log(data);
        return queryData('http://localhost:3000/data2');
      })
      .then(function(data){     //p.then()得到异步任务的正确结果  resolve中的信息
        console.log(data)
      })
      .catch(function(data){    //p.catch()获取异常信息  reject中的信息
        console.log(data)
      })
      .finally(function(){  	//p.finally()成功与否都会执行（不是正式标准
      	console.log("成功与否都会执行")
      })
  </script>

• 在then方法中函数的返回值，你也可以直接return数据而不是Promise对象，在后面的then中就可以接收到数据了

3.3 Promise常用的API

1.实例方法

• p.then ( ) 得到异步任务的正确结果 resolve中的信息
• p.catch ( ) 获取异常信息 reject中的信息
• p.finally ( ) 成功与否都会执行（不是正式标准）

2.对象方法

.all()

• Promise.all方法接受一个数组作参数，数组中的对象（p1、p2、p3）均为promise实例（如果不是一个promise，该项会被用Promise.resolve转换为一个promise)。它的状态由这三个promise实例决定

• 并发处理多个异步任务，所有任务都执行完成才能得到结果

.race()

• Promise.race方法同样接受一个数组作参数。当p1, p2, p3中有一个实例的状态发生改变（变为fulfilled或rejected），p的状态就跟着改变。并把第一个改变状态的promise的返回值，传给p的回调函数

• 并发处理多个异步任务，只要有一个任务完成就能得到结果

    
    function queryData(url) {
     #   1.1 创建一个Promise实例
      var p = new Promise(function(resolve, reject){
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
          if(xhr.readyState != 4) return;
          if(xhr.readyState == 4 && xhr.status == 200) {
            # 1.2 处理正常的情况
            resolve(xhr.responseText);
          }else{
            # 1.3 处理异常情况
            reject('服务器错误');
          }
        };
        xhr.open('get', url);
        xhr.send(null);
      });
      return p;
    }
    
/*
   Promise常用API-对象方法
*/  
var p1 = queryData('http://localhost:3000/a1');
var p2 = queryData('http://localhost:3000/a2');
var p3 = queryData('http://localhost:3000/a3');

Promise.all([p1,p2,p3]).then(function(result){
 //all 中的参数  [p1,p2,p3]   和 返回的结果一 一对‘应["TOM", "JERRY", "SPIKE"]
   console.log(result) //["TOM", "JERRY", "SPIKE"]
})

Promise.race([p1,p2,p3]).then(function(result){
 // 由于p1执行较快，Promise的then()将获得结果'P1'。   p2,p3仍在继续执行，但执行结果将被丢弃。
 console.log(result) // "TOM"
})

4.接口调用---fetch --- xhr的升级版

fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。

4.1 基本用法

  <script type="text/javascript">
    /*
      Fetch API 基本用法    fetch(url).then()
     	第一个参数请求的路径   Fetch会返回Promise   所以我们可以使用then 拿到请求成功的结果 
    */
    fetch('http://localhost:3000/fdata').then(function(data){
      // text()方法属于fetchAPI的一部分，它返回一个Promise实例对象，用于获取后台返回的数据
      return data.text();
    }).then(function(data){
      //   在这个then里面我们能拿到最终的数据  
      console.log(data);
    })
  </script>

4.2 fetch API 中的 HTTP 请求

1 GET参数传递 - 传统URL 通过url ？ 的形式传参

fetch('http://localhost:3000/books?id=123', {
            	# get 请求可以省略不写 默认的是GET 
                method: 'get'
            })
            .then(function(data) {
            	# 它返回一个Promise实例对象，用于获取后台返回的数据
                return data.text();
            }).then(function(data) {
            	# 在这个then里面我们能拿到最终的数据  
                console.log(data)
            });

2 GET参数传递 restful形式的URL 通过/ 的形式传递参数 即 id = 456 和id后台的配置有关

fetch('http://localhost:3000/books/456', {
            	# get 请求可以省略不写 默认的是GET 
                method: 'get'
            })
            .then(function(data) {
                return data.text();
            }).then(function(data) {
                console.log(data)
            });

3 DELETE请求方式参数传递 删除id 是 id=789

fetch('http://localhost:3000/books/456', {
            	# get 请求可以省略不写 默认的是GET 
                method: 'get'
            })
            .then(function(data) {
                return data.text();
            }).then(function(data) {
                console.log(data)
            });

4 POST请求传参

fetch('http://localhost:3000/books', {
                method: 'post',
            	# 3.1  传递数据 
                body: 'uname=lisi&pwd=123',
            	#  3.2  设置请求头 
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            })
            .then(function(data) {
                return data.text();
            }).then(function(data) {
                console.log(data)
            });


fetch('http://localhost:3000/books', {
                method: 'post',
                body: JSON.stringify({
                    uname: '张三',
                    pwd: '456'
                }),
                headers: {
                    'Content-Type': 'application/json'
                }
       })
       .then(function(data) {
           return data.text();
       }).then(function(data) {
           console.log(data)
       });

5 PUT请求传参 修改id 是 123 的

fetch('http://localhost:3000/books/123', {
                method: 'put',
                body: JSON.stringify({
                    uname: '张三',
                    pwd: '789'
                }),
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(function(data) {
                return data.text();
            }).then(function(data) {
                console.log(data)
            });

fetchAPI 中 响应格式

fetch('http://localhost:3000/json').then(function(data){
  // return data.json();   //  将获取到的数据使用 json 转换对象
  return data.text(); //  //  将获取到的数据 转换成字符串 
}).then(function(data){
   // console.log(data.uname)
   // console.log(typeof data)  string
   var obj = JSON.parse(data); //转化成对象
   console.log(obj.uname,obj.age,obj.gender)
})

5.接口调用--axios

Axios 是一个基于 promise 的 HTTP 库，是专注于网络数据请求的库，可以用在浏览器和 node.js 中。

5.1 综合写法

axios({
	method:"请求的方式"
	url:"请求的地址"
	data:发送的数据
	headers:请求头
}).then(()=>{})
.catch(()=>{})

5.2 axios 全局配置

#  配置公共的请求头 
axios.defaults.baseURL = 'https://api.example.com';
#  配置 超时时间
axios.defaults.timeout = 2500;
#  配置公共的请求头
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
# 配置公共的 post 的 Content-Type
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

5.3 axios 拦截器

5.3.1 请求拦截器

• axios.interceptors.request.use(function(config) {
        console.log(config.url)
        # 1.1  任何请求都会经过这一步   在发送请求之前做些什么   
        config.headers.mytoken = 'nihao';
        # 1.2  这里一定要return   否则配置不成功  
        return config;
      }, function(err){
         #1.3 对请求错误做点什么    
        console.log(err)
      })
  

5.3.2 响应拦截器

• axios.interceptors.response.use(function(res) {
        #2.1  在接收响应做些什么  
        var data = res.data;
        return data;
      }, function(err){
        #2.2 对响应错误做点什么  
        console.log(err)
      })
  

5.4 创建axios实例

• const instance = axios.create({
    baseURL: 'https://some-domain.com/api/',
    timeout: 1000,
    headers: {'X-Custom-Header': 'foobar'}
  });
  

6. **async await **让异步代码看起来更像同步代码 --ES7

async关键字 放到函数前面 (返回值是一个promise实例对象)

await关键字 只能在使用async定义的函数中使用（得到异步的结果，await只能得到成功的结果，如果想要得到失败的结果，只能用trycatch）

6.1处理单个异步请求

async getFaceResult () {
//用的是try/catch来捕获异常，把await放到try中进行执行
//如有异常，就使用catch进行处理,不会影响后面的代码
      try {
         let location = await getLocation()
      } catch(err) {
         console.log("错误"，err)
    }
}

6.2处理多个异步请求

async getFaceResult () {
      try {
          // 添加await之后 当前的await 返回结果之后才会执行后面的代码
         let location = await getLocation()
         let ret = await getList()
      } catch(err) {
         console.log("错误"，err)
    }
}