微信小程序之ajax方法封装_微信小程序中封装axaj

微信小程序之ajax方法封装

我们为了更好的也更方便的进行代码优化，所以对于很多相同的方法或者API我们来进行封装也可以精简代码量。那我们将方法封装到utils包下。

我是将网络请求封装到了这个方法集合下

const htp = {
  //首页网络请求
  //方法括号中代表这个网络请求的参数
  dy: function (url, index, v) {
    wx.request({
      url: backurl + url,
      method: "GET",
      success: (res) => {
        var moveList = moved[index].m1
        var list = res.data.subject_collection_items
        // console.log("list",list)
        // console.log("moved",moved)
        if (moveList.length == list.length) {
          v.success(moved)
        } else {
          for (var i = 0; i < list.length; i++) {
            moveList.push(list[i])
          }
          moved[index].m1 = moveList
          // console.log("moved",moved)
          v.success(moved)
        }
      },
      fail: (err) => {
        wx.showToast({
          title: '网络请求超时',
          icon: "none"
        })
      }
    })
  },
  }
//将这个方法集合用接口方法暴露在外
export {htp}
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

而在这个网络请求中因为有很多参数，所以我们在API外的方法中的参数中带入网络请求需要i的参数。

而我们在其他页面中调用这个方法集合中的方法时先需要在js文件开头这样导入这个方法文件的信息

import {htp} from "../../utils/requ";
1

import后写的是这个方法集合的名称，而在form后写的是这个方法集合的路径
然后我们就可以在js中调用这个方法集合中的方法了

//它的意思是在htp下的dy方法后面括号中写着网络请求需要的参数
htp.dy("movie_showing/items",0,{success:(res)=>{this.setData({move:res})}})
1
2

那么这种封装的方法会有返回的参数那么这些返回的参数怎么返回到需要的页面
我们在封装时写入了三个参数

dy: function (url, index, v)
1

而最后一个参数代表了返回的参数，因为我们的每一个参数或方法中都会带有success回调函数和fail回调参数，那么我们就利用这个来在参数的success回调中带回网络请求中的返回成功参数

   success: (res) => {
       v.success(res.data)
1
2

我们利用了v的success回调函数将网络请求的成功返回参数带入到它的成功返回参数中。