等待一段时间继续执行-- setTimeout

最新推荐文章于 2024-12-05 11:10:09 发布

原创最新推荐文章于 2024-12-05 11:10:09 发布 · 607 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#sleep封装 #等待一段时间继续执行 #setTimeout

JavaScript 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一个在前端开发中遇到的问题，即多个地址组件同时加载导致数据获取冲突。通过使用Promise封装setTimeout实现异步等待，确保在请求锁释放后获取到数据。当请求失败时，会进行重试，并在超过一定次数后返回空数组。这种方法可以有效地避免因并发导致的数据不一致。

前言

我的业务场景：地址组件从脚本那里拿接口数据，如果表单有两个地址组件，两个地址组件同时加载，以致于第二个组件拿不到数据。所以得每100毫秒调用获取数据的方法，等到第一个组件地址api请求完，然后就有数据返回了。

正文

promise来包装一下setTimeout()来实现一个sleep()

const sleep = function (time) {
  return new Promise((resolve) => setTimeout(resolve, time))
}

地址组件数据返回

/**
 * 地址api数据请求
 */
// 请求锁
let requestLock = true
const getCityData = async function (frequency = 1) {
  let cityData = utils.LS.get('cityData')
  if (cityData && cityData.length > 0) return cityData
  try {
    if (requestLock) {
      requestLock = false
      const res = await axios.get('https://......static/district.json')
      utils.LS.set('cityData', res.data)
      requestLock = true
      return res.data
    } else {
      // 如果表单有两个地址组件，两个地址组件同时加载，以致于第二个组件拿不到数据，
      // 所以如果window.cityData没有数据则每100毫秒调用本身这个方法，等到第一个地址api请求完，window.cityData就有数据返回了
      await sleep(100)
      return getCityData()
    }
  } catch (error) {
    console.log(error)
    requestLock = true
    // 如果出现错误重试3次
    if (frequency > 3) {
      return []
    }
    await sleep(300)
    return getCityData(frequency + 1)
  }
}