js 接口同时执行并返回

46 篇文章 0 订阅
24 篇文章 1 订阅

Promise.all()写法
链接:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/all


自定义方法

// await 接口同时
async function awaitFn(arr = []) {
  return new Promise(resolve => {
    const promises = arr
    let count = 0

    for (let result of promises) {
      result().then(res=> {
        count = count + 1
        // console.log({
        //     'return值为:': res,
        //     '当前执行次数为:': count,
        //     '总长度为:': arr.length
        // })
      })
    }

    let interval = setInterval(() => {
      if (count>= arr.length) {
        // console.log('并发执行完毕')
        clearInterval(interval)
        resolve()
      }
    }, 500)
  })
}

const promise1 = new Promise((resolve, reject) => {
	// 模拟请求接口返回数据
	setTimeout(() => {
		resolve(1)
	}, 500)
})
const promise2 =  new Promise((resolve, reject) => {
	setTimeout(() => {
		resolve(2)
	}, 300)
})
const promise3 = new Promise((resolve, reject) => {
	setTimeout(() => {
		resolve(3)
	}, 1000)
})
let awaitFnList = []
awaitFnList.push(async () => await promise1)
awaitFnList.push(async () => {
	const b = await promise2
	console.log('promise2接口返回值:', b)
	return b
})
awaitFnList.push(async () => await promise3)
await awaitFn(awaitFnList)
console.log('接口同时执行完毕')
Vue.js中,你可以使用async/await或Promise来实现让一个函数执行完毕且返回结果后,再执行后续操作。 1. 使用async/await: ```javascript async function fetchData() { // 执行耗时操作,例如发送网络请求等 const result = await axios.get('https://api.example.com/data'); return result.data; } async function doSomething() { const data = await fetchData(); // 等待fetchData函数执行完毕并返回结果 // 执行后续操作,使用fetchData函数返回的数据 console.log(data); } ``` 在上面的示例中,fetchData函数是一个异步函数,它执行耗时操作并返回一个Promise。在doSomething函数中,使用await关键字等待fetchData函数执行完毕并返回结果,然后再执行后续操作。 2. 使用Promise: ```javascript function fetchData() { return new Promise((resolve, reject) => { // 执行耗时操作,例如发送网络请求等 axios.get('https://api.example.com/data') .then(response => resolve(response.data)) .catch(error => reject(error)); }); } function doSomething() { fetchData() .then(data => { // 执行后续操作,使用fetchData函数返回的数据 console.log(data); }) .catch(error => { // 处理错误情况 console.error(error); }); } ``` 在上面的示例中,fetchData函数返回一个Promise对象,其中执行耗时操作,并根据请求结果调用resolve或reject。在doSomething函数中,使用.then方法等待fetchData函数返回的Promise对象执行完毕并获取结果,然后再执行后续操作。如果发生错误,可以使用.catch方法进行错误处理。 无论是使用async/await还是Promise,都可以实现让一个函数执行完毕且返回结果后,在执行后续操作。你可以根据自己的需求选择其中一种方式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值