微信小程序-wx.request获取数据

最新推荐文章于 2024-11-25 21:46:30 发布

原创最新推荐文章于 2024-11-25 21:46:30 发布 · 1.4w 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#微信 #前端 #小程序

微信小程序专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何在微信小程序中正确使用API进行前后端数据交互，并提供了解决异步请求顺序问题的方法。

这个是小程序官方API给的参数，详细请参考官方API

这里写图片描述

看了API之后，就举个栗子吧，一般普通的请求接口是这样，如下：

js代码

Page({
  data:{
    // text:"这是一个页面"
    result: []
  },

  onLoad:function() {
      var that = this; 
      wx.request({
          url: '这里放后台请求的接口地址',
          method: 'POST',           //注意method一定要大写
          //post请求 "Content-Type": "application/x-www-form-urlencoded"  post上传数据要string类型，所以需要转化；
          //get请求 默认"Content-Type": application/json
          header: {
              "Content-Type": "application/x-www-form-urlencoded"  // post
          },                       
          success:function(res) {
              //请求数据成功的回调函数
          }
          complete: function (res) {
              //请求完成的回调函数
          },
      })
  }
})

Bug & Tip

1.tip: content-type 默认为 ‘application/json’;
2.tip: url 中不能有端口；
3.bug: 开发者工具 0.10.102800 版本，header 的 content-type 设置异常；

当我在用一般情况的request调用数据时，遇到了一种状况；

一个页面需要调用多个接口时，而且第二个接口要用第一个接口返回的数据，有时候就会出问题；

因为wx.request方法都是异步的，而且不支持同步，所以当我们调用第二个接口时，可能第一个接口还没有返回成功，所以就会出现报错，

所以根据这个问题，需要让wx.request顺序执行就可以了；

方法如下：

我在一个util.js写下如下方法:

var Promise = require('es6Promise.min.js')  //我用了es6Promise.js

function wxPromisify(fn) {  
  return function (obj = {}) {    
    return new Promise((resolve, reject) => {      
      obj.success = function (res) {        
        resolve(res)      
      }      

      obj.fail = function (res) {        
        reject(res)      
      }      

      fn(obj)    
    })  
  }
}

module.exports = {  
  wxPromisify: wxPromisify
}

使用方法如下：

var util = require('../utils/util');

var wxRequest = util.wxPromisify(wx.request)

wxRequest({
  url: 'https://...........'
}).then(function (res) {
  // 处理第一个请求结果...
}).then(function () {
  return wxRequest({
    url: 'https://...........'
  })
}).then(function (res) {
  // 处理第二个请求的结果...
})