同步与异步

异步：同时进行多个操作，用户体验好，但代码混乱

//麻烦，降低代码质量

ajax("",function data1(){

    ajax("",function data2(){
    
        ajax("",function data3(){
        
        },function(err){
        
        })
    },function(err){
    
    })
},function(err){

})

同步：一次只能进行一个操作，用户体验不好，但是代码清晰

let data1 = ajax("")
let data2 = ajax("")
let data3 = ajax("")

Promise

Promise封装

<!-- 1.txt -->
{"a":"15","b":"58"}

let data = new Promise(function(resolve,reject){
    //异步 ·····
    //resolve  —— 成功
    //resolve —— 失败
    $.ajax({
        url:"1.txt",
        dataType:'json',
        success(res){
          resolve(res);
        },
        error(err){
          reject(err);
        }
     })
})

引入 then

data.then( function(arr){
        console.log(arr) //{a: "15", b: "58"}
    } , function(err){
        console.log(err);
    } );

jquery 中的 $.ajax

<!-- 1.txt -->
{"a":"15","b":"58"}

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
      let result = $.ajax({
        url:"1.txt",
        dataType:'json'
      }).then(res=>{
        console.log(res);//{"a":"15","b":"58"}
      },err=>{
        console.log(err);
      })
      console.log(result);//jQuery的$.ajax,返回一个promise对象
    </script>

Promise.all

格式：

Promise.all([
    ····
]).then( 
    function(res){
        // 成功时执行 
    },function(err){
        //失败时执行
})

当执行多条ajax数据，成功获取的数据会保存在res数组中，可以使用解构赋值将数据分离

<!-- 1.txt -->
{"a":"15","b":"58"}

<!-- 2.txt -->
[1,5,96]

    <script>
      Promise.all([
        $.ajax({url:"1.txt",dataType:'json'}),
        $.ajax({url:"2.txt",dataType:'json'})
      ]).then(res=>{
        console.log(res);//(2)[{…}, Array(3)]
      },err=>{
        console.log(err);
      })
    </script>

使用解构赋值,将获取的数据进行分割赋值

      Promise.all([
        $.ajax({url:"1.txt",dataType:'json'}),
        $.ajax({url:"2.txt",dataType:'json'})
      ]).then(([data1,data2])=>{
        console.log(data1);//{a: "15", b: "58"}
        console.log(data2);//(3)[1, 5, 96]
      },err=>{
        console.log(err);
      })

async/await

异步的操作，同步的写法

使用：

async function show(){
  xxxx;
  xxxx;
  let data = await $.ajax(); 
  xxx;
}
show()

普通函数 —— 一直执行，直到结束

async函数 —— 可以暂停执行

async函数 以await为切割线，将函数分割开来，达到暂停函数的效果

捕获异常使用try catch

try{
    
}catch(e){
    
}