记录

小程序接口优化—提取公共接口路径

  • 2022-08-21
  • 作者 我爱小小蝶
  • ~1.51K 字
  1. 1. request文件夹中的index.js：
  2. 2. 使用例子：

调用接口时，url可以不用麻烦的写一大串了

request文件夹中的index.js：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// 同时发送异步代码的次数
let ajaxTimes=0;
export const request=(params)=>{
  ajaxTimes++;

  wx.showLoading({
    title: '加载中',
    mask: true,
    success: (res) => {},
    fail: (res) => {},
    complete: (res) => {},
  })

  // 定义公共的url
  const baseUrl = "https://api-hmugo-web.itheima.net/api/public/v1";
  return new Promise((resolve,reject)=>{
      wx.request({
          ...params,
          url: baseUrl+params.url,
          success: (result)=>{
              resolve(result);
          },
          fail: (error)=>{
              reject(error);
          },
          // 对多个请求回来了才执行关闭图标，避免对应不上
          complete: (res) => {
            ajaxTimes--;
            if(ajaxTimes==0) {
              // 关闭正在等待的图标
              wx.hideLoading();
            }
            
          }
      });
  })
}

使用例子：

1
2
3
4
5
6
7
8
// 获取轮播数据
getSwiperList() {
  request({url: "/home/swiperdata"}).then((result=> {
    this.setData({
            swiperList: result.data.message
          })
  }))
},
1
2
3
4
5
6
7
8
// 获取分类导航数据
 getCateList() {
   request({url: "/home/catitems"}).then((result=> {
     this.setData({
       catesList: result.data.message
     }) 
   })) 
 },