等待多个请求（请求并发执行）都完成后结束Loading框

最新推荐文章于 2024-08-29 14:51:19 发布

每天都要加油呀！

最新推荐文章于 2024-08-29 14:51:19 发布

阅读量726

点赞数

分类专栏：前端文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/fengxiandada/article/details/134623481

版权

前端专栏收录该内容

5 篇文章 2 订阅

订阅专栏

等待多个请求（请求并发执行）都完成后结束Loading框

// 这里用vue进行示范，react使用useEffect是一样的
onMounted(() => initializeApp(
  initSwiper(),
  initNoticeText(),
  initCardTypes(),
  initCards()
));

/**
 * 传入多个promise对象，当全部结束时取消Loading
 * @param promises 传入多个promise对象，当全部结束时取消Loading
 */
export const initializeApp = async (...promises: Promise<void>[]) => {
  // loading方法全局封装成一个组件
  showLoading();
  try {
    await Promise.all(promises);
  } catch (e) {
    console.error(e);
  } finally {
    hideLoading();
  }
};

// 其中一个方法，经过async返回的是一个promise对象
const initCards = async () => {
  return getCards().then(res => {
    cards.value = res.rows as card[]
  })
}

export const getCards = () => {
  return httpPostByForm<any, card>("xxxx, {
    clientType,
    hot: "true",
  });
};

export const httpPostByForm = <T, U>(url: string, data?: any) => {
  return http<T, U>({
    method: "POST",
    url: url,
    header: { "Content-Type": "application/x-www-form-urlencoded" },
    data: data,
  });
};

// 下面这里使用axios是一样的
export const http = <T, U>(options: UniApp.RequestOptions) => {
  // 1. 返回Promise对象
  return new Promise<HttpResponse<T, U>>((resolve, reject) => {
    uni.request({
      ...options,
      success(res) {
        resolve(res.data)
      },
      false(err: any) {
        reject(err);
      },
    });
  });
};