两个异步均执行结束,再同步执行第三个函数

1.js用Promise方法

// 封装地形 GeoJSON 数据接口
// 将每个数据接口封装为一个返回 Promise 的函数
function getArea () {
  return new Promise((resolve, reject) => {
    fetch('./resources/china.json').then(resp =>
      resp.json().then(china => resolve(china))
    )
  })
}

// 封装分色地图数据接口
function getPopulation () {
  return new Promise((resolve, reject) => {
    fetch('./resources/china-population.json').then(resp =>
      resp.json().then(data => resolve(data))
    )
  })
}

// 封装城市数据接口
function getCity () {
  return new Promise((resolve, reject) => {
    fetch('./resources/city.json').then(resp =>
      resp.json().then(data => resolve(data))
    )
  })
}

// 使用 Promise.all 以在三个数据接口均异步成功后,执行回调逻辑
Promise.all([getArea(), getPopulation(), getCity()]).then(values => {
  // 依次从返回的数据接口数组中获取不同接口数据
  let china = values[0]
  let population = values[1]
  let city = values[2]
  // 使用数据
  doWithData(china, population, city)
})

如果需要两个依次执行,可以用then连接,如果对顺序无要求,可以放入一个数组中,用Promise.all执行。

2.jquery用$.when
并发执行,都请求结束后再返回。有一个请求错误就报错返回

$.when($.ajax({
  url: "test1.html",
  data:data1,
}),$.ajax({
  url: "test2.html",
  data:data2,
})).done(function(data1,data2){
    console.log('2个ajax请求均结束,并按照ajax的请求顺序返回'); 
}).fail(function(){
    console.log('2个ajax有请求失败');
})
$.when($.ajax({
  url: "test1.html",
  data:data1,
}, $.ajax({
  url: "test2.html",
  data:data2,
})).then(function(data1,data2){
      console.log('2个ajax请求均结束,按照ajax的请求顺序返回');
},function(error){
      console.log('报错');
})

done和then区别是:then可以将可以把done()和fail()合在一起写,包括成功和失败的回调函数。done中回调函数只能是成功

  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值