正确调用小程序后端接口的方法与要点解析

why 1385 2024-07-02

小程序该如何正确调用后端接口

写在前面的话:

最近在学习如何请求后端接口时,原本打算请求项目中正在使用的接口,但是微信小程序不允许。官方提示接口必须有域名且备案,但是我们的接口都是IP地址,因此无力回天。

但是,我们不必沮丧,下面分享下官方给的请求接口的方法,供大家参考。

一、官方方法

此方法简单易懂,但是在使用时代码量过大,我建议还是封装一下比较好用。

1

2

3

4

5

6

7

8

9

10

11

12

13

wx.request({

  url: 'test.php', // 仅为示例,并非真实的接口地址

  data: {

    x: '',

    y: ''

  },

  header: {

    'content-type': 'application/json' // 默认值

  },

  success(res) {

    console.log(res.data)

  }

})

二、请求方法封装(新建文件夹util,工具文件,在文件夹下创建request.js文件,用于对方法封装)request.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

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

var app = getApp();

//项目URL相同部分,减轻代码量,同时方便项目迁移

//这里因为我是本地调试,所以host不规范,实际上应该是你备案的域名信息

var host = 'http://localhost:8081/demo/';

 

/**

 * POST请求,

 * URL:接口

 * postData:参数,json类型

 * doSuccess:成功的回调函数

 * doFail:失败的回调函数

 */

function request(url, postData, doSuccess, doFail) {

  wx.request({

    //项目的真正接口,通过字符串拼接方式实现

    url: host + url,

    header: {

      "content-type": "application/json;charset=UTF-8"

    },

    data: postData,

    method: 'POST',

    success: function (res) {

      //参数值为res.data,直接将返回的数据传入

      doSuccess(res.data);

    },

    fail: function () {

      doFail();

    },

  })

}

 

//GET请求,不需传参,直接URL调用,

function getData(url, doSuccess, doFail) {

  wx.request({

    url: host + url,

    header: {

      "content-type": "application/json;charset=UTF-8"

    },

    method: 'GET',

    success: function (res) {

      doSuccess(res.data);

    },

    fail: function () {

      doFail();

    },

  })

}

 

/**

 * module.exports用来导出代码

 * js文件中通过var call = require("../util/request.js")  加载

 * 在引入引入文件的时候"  "里面的内容通过../../../这种类型,小程序的编译器会自动提示,因为你可能

 * 项目目录不止一级,不同的js文件对应的工具类的位置不一样

 */

module.exports.request = request;

module.exports.getData = getData;

三、在page里面创建一个文件夹,创建四种文件,在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

1 //引入代码

 2 var call = require("../util/request.js")

 3

 4 Page({

 5   data: {

 6     pictureList: [],

 7   },

 8  

 9   onLoad: function () {

10     var that = this;

11     //调用封装的方法,为了方便我直接在页面加载的时候执行这个方法

12     call.getData('lunbo.do', this.shuffleSuc, this.fail);

15   },

16   shuffleSuc: function (data) {

17     var that = this;

18     that.setData({

19       pictureList: data.rows

20     })

21     //我后面测试了一下,直接this.setData也可以,但是因为我在没有使用封装方法的时候

22     //this.setData报过错,不能直接用this,所以我在赋值的时候一般都会加上var that = this;

23     //这句话算是一个不是习惯的习惯

24   },

25   fail: function () {

26     console.log("失败")

27   },

28 })

将回调函数写在page里面,在调用封装方法的时候通过this.方法名调用,这样就能确保that.setData方法有效。


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:快速转发微信语音的方法与步骤详细教程
下一篇:微信能否向他人发送文件夹的相关探讨
相关文章

 发表评论

暂时没有评论,来抢沙发吧~