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

wx.request({

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

  data: {

    x: '',

    y: ''

  },

  header: {

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

  },

  success(res) {

    console.log(res.data)

  }

})

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;

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 })