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

这个是小程序官方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) {
  // 处理第二个请求的结果...
})
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值