async、await使用_await和const能一起用吗-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_65591699/article/details/127414946

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="jquery.js" charset="utf-8"></script>
    <script>
		
     //1. es6中promise使用。可把异步操作改成同步执行
	/* var p=new Promise(function(resolve,reject){
		 resolve('成功了')
	 })
	 console.log(p) //Promise对象 {} 
	 p.then(re=>{
	 	 console.log(14,re);
	 }).catch(err=>{
	 	 console.log(err);
	 }) */
	 
	 
	//2.1 es7中新增 async 函数，async 是“异步”的简写， async 用于申明一个异步的 function 。await 可以认为是 async wait 的简写，await 用于等待一个异步方法执行完成。它返回一个 Promise 对象。它更简介，也可把异步执行弄成同步执行 。!!!!注意，只能在函数外使用。async内部相当于封装了promise对象
	
	  	// async function show(){
		// 	return  "Hello world!";
		// }
		
		// console.log('async返回的是promise对象',show()); //Promise对象 {} 
	    // show().then(res=>{
        //     console.log('成功结果',res);
        // })
	
	
	//2.2 除了async外，跟它搭配使用的一个叫await 。await的功能相当于代替promise中.then执行的内容。await 要的是异步执行的内容
	// !!!注意问题 ,如果有await必须有async。async要放在await最近一个函数的外面
	/*  async function show(){
			var a1= await $.ajax({url: 'data/1.json'})  //{a:7}
			console.log(38,a1) //{a: 7} {b:5} {c: 99}
            var a2= await $.ajax({url: 'data/2.json'})  //{a:7}
			console.log(a2) //{a: 7} {b:5} {c: 99}
		}
		
	show()  */
	 
	
	 //3.async，await与promise有时是相辅相成的。比如在封装后台给的不同接口地址时，就需要对ajax进行在次封装
	
	 //解决问题1-封装统一接口地址,像在次网络封装wx.request,uni.request等
   function getAjax(url2){
	 		return new Promise(function(resolve,reject){
	 			 $.ajax({
	 			 	url:url2, //接口地址
	 			 	success:function(res){
	 			 		resolve(res) //成功回调
	 			 	},
	 			 	error:function(err){
	 			 		reject(err) //失败回调
	 			 	}
	 			 })
	 			 
	 		 })	
	 		  
	 	}
/* 	async function getAsync(){
		
	    var a1= await getAjax('data/1.json')  //外面传入不同的接口路径
		
		var a2= await getAjax('data/2.json')
		
				
	    var a3= await getAjax('data/3.json')
		
		console.log(111,a1,a2,a3)	
	}
	
	getAsync() */
		
		
	 //解决问题2-ajax回调地狱问题-下次的数据，依赖上次的数据
	 //根据异步1的结果，是否执行2或者3。这样就解决了ajax层层嵌套这些回调地狱
	 /*  async function getAsync(){
	 	var a1= await getAjax('data/1.json')  //{a:7}
	
	 	if(a1){//条件不满足,不执行
	 		var a2= await getAjax('data/2.json')
			if(a2){
				console.log('a2的结果执行了')
			}
	 	}
	 	else{
	 		var a3= await getAjax('data/3.json')
			if(a3){
				console.log('a3的结果执行了')
			}
	 	}
	 	
	 }
	 
	 getAsync() */
	 
     //4.async，await的错误处理-如果请求发生异常，怎么处理？把await 放到 try 中进行执行，如有异常，就使用catch 进行处理
   //还原问题-网络请求不可控，会影响后面代码执行
 /*  async function getAsync2(){
        
              let res1=await getAjax('data/a.json')
              let res2=await getAjax('data/2.json')
              console.log(144,res1,res2)
        
             //后边有代码会影响,因为上面有错误
             console.log(147,'奎哥好帅')
     }
  getAsync2() */

  //解决问题  js原生 try{放网络请求可能出错} catch{捕获错误}
   async function getAsync1(){
        try {
          let res1=await getAjax('data/1.json')
          let res2=await getAjax('data/2.json')
          console.log(res1,res2)
          
        } catch (error) {
            console.log('捕捉错误异常，不影响后续代码执行',error.status); 
        }
         
         //后边有代码也不会影响执行
         console.log(163,'奎哥好帅');
 }
getAsync1() 


    </script>
  </head>
  <body>

  </body>
</html>

总结：

async/await的优缺点：
它是把异步请求变成同步执行的.async放在最近函数外调用,返回的是promise对象.
1.方便级联调用：即调用依次发生的场景；
2.同步代码编写方式： Promise使用then函数进行链式调用，一直点点点，是一种从左向右的横向写法；async/await从上到下，顺序执行，就像写同步代码一样，更符合代码编写习惯；

缺点：
没有catch错误处理，需要用js原生的try,catch进行错误处理 */