promise|promise和async+await ajax|前端|javascript

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')//同步执行

【promise|promise和async+await】//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()