promise和async+await_js promise async和await 实现多个同步请求-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_56812055/article/details/120890039

这篇博客探讨了JavaScript中Promise和async/await的用法，如何解决回调地狱问题，以及它们如何将异步操作转换为同步执行的风格。通过实例展示了Promise的创建、then链式调用，以及如何使用async函数和await关键字简化异步代码，使得代码更加清晰和易于管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Promise ——主要用于把异步请求数据改成同步执行

异步操作：操作之间没啥关系，可以进行多个操作。代码复杂一些
同步操作：同时只能做一件事情。代码相对简单一些

基本用法：

var p= new Promise(function (resolve, reject) {
		   //异步请求内容-事件，ajax,定时器
		    resolve("成功！");
	                   // reject("失败！");
		})
		// promise用同步代替异步执行
		p.then(function (res) { //成功回调
			console.log(res); //成功
		}, function (err) { //失败回调
			console.log(err);
		})

ajax回调地域问题（一层一层嵌套不优雅）：

ajax('/banners', function (banner_data){
  ajax('/hotItems', function (hotitem_data){
    ajax('/slides', function (slide_data){
      ajax('/slides', function (slide_data){

      }, function (){
        alert('读取失败');
      });
    }, function (){
      alert('读取失败');
    });
  }, function (){
    alert('读取失败');
  });
}, function (){
  alert('读取失败');
});

promise可解决回调地域问题，通过promise封装ajax方法

 function getAjax(url2){
    		return new Promise(function(resolve,reject){
    			 $.ajax({
    			 	url:url2, //url可通过外面传入
    			 	success:function(res){
    			 		resolve(res) //成功回调
    			 	},
    			 	error:function(err){
    			 		reject(err) //失败回调
    			 	}
    			 })
    		 })	  
    	}
    	//然后通过同步的方式调用
 var arr=getAjax('data/arr.txt')   //同步执行
 var arr2=getAjax('data/num.txt')  //同步执行

//1.1 es7中新增 async 函数，它返回一个 Promise 对象。它更简介，也可把异步执行改成同步执行
!!!注意，只能在函数外使用。async内部相当于封装了promise对象

//2.1 除了async外，还有一个叫await 。await的功能相当于代替promise中.then执行的内容。要的是异步执行的内容
// !!!注意问题 ,如果有await必须有async。async要放在await最近一个函数的外面
async function show(){
var a1= await $.ajax({url: ‘data/1.json’}) //{a:7}
console.log(a1) //{a: 7} {b:5} {c: 99}
}
show()

//3.1 用async,await实现promise功能
async function getAsync(){
var a1= await $.ajax({url: ‘data/1.json’}) //{a:7}
var a2= await $.ajax({url: ‘data/2.json’})
var a3= await $.ajax({url: ‘data/3.json’})
console.log(a1,a2,a3) //{a: 7} {b:5} {c: 99}
}
getAsync()