在uniapp小程序中使用并发请求

前言

提示：为什么要使用并发请求

同一个页面中多次请求相继发出后使用 async/await 会因同步而产生请求的阻塞，进而导致全部请求所耗费的时间比较长，此时应该通过调用 http.all 方法来处理并发请求。

---

提示：本篇文章使用的是TS，下面案例可供参考

一、封装请求

1.使用uni.addInterceptor拦截器

使用uni.addInterceptor 可以在发起请求前，添加数据 文档连接：uniapp.dcloud.net.cn/api/interce… 提示：仅支持异步接口

代码如下（示例）：

uni.addInterceptor('request', {
  invoke(args) {
    // request 触发前拼接 url 
    const baseURL = ''
    if (!(args.url as string).startsWith('http')) {
      args.url = baseURL + args.url
    }
    args.header = {
      ...args.header
    }
    //  打开加载提示
    uni.showLoading({
      title: '加载中',
      mask: true
    })
  },
  complete() {
    uni.hideLoading();
  }
})

2.Promise 封装

将 uni.request 封装到一个名为 http 的函数中，如下代码所示：

// 定义接口返回数据
interface ApiRes {
  code: string,
  msg: string,
  result: any
}
export const http = <T>(options: UniApp.RequestOptions) => {
  return new Promise<T>((resolve, reject) => {
    uni.request({
      ...options,
      success: (res) => {
        resolve((res.data as ApiRes).result)
      },
      fail: (error) => {
        reject(error)
      }
    })
  })
}

二、使用Promise.all优化

1.发起请求

比如你发个请求,下面这种就是典型的回调地狱,这种发请求的方式,都是只能上一个请求发完,才会进去发下一个

代码如下（示例）：

  getBannerList().then(()=>{
	getHomeCateHeaderResult().then(()=>{
		getHomeHotResult().then(()=>{})
		})
	})
 

2.使用Promise.all

如果你用promise.all就可以达到并发发送请求的作用,并且Promise.all获得的成功结果的数组里面的数据顺序和Promise.all接收到的数组顺序是一致的，即p1的结果在前，即便p1的结果获取的比p2要晚。这带来了一个绝大的好处：在前端开发请求数据的过程中，偶尔会遇到发送多个请求并根据请求顺序获取和使用数据的场景，使用Promise.all毫无疑问可以解决这个问题 代码如下（示例）：

const [BannerData, CateData, HotData, NewsData] = await Promise.all([
    getBannerList(),
    getHomeCateHeaderResult(),
    getHomeHotResult(),
    getNewsItemList(),
  ])

---

总结

本文仅仅简单介绍了小程序http封装的使用，并使用Promise.all将请求发起方式变为并发。