zoukankan      html  css  js  c++  java
  • 小程序封装wx.request,以及调用

    1、新建一个api目录,与pages同级

    2、在api目录下新建一个api.js文件

    3、编写代码

    const host = 'http://test.test.cn'
    const wxRequest = function (params, url) {
      wx.showToast({
        title: '加载中...',
        icon: 'loading'
      })
      wx.request({
        url: url,
        method: params.method || 'GET',
        data: params.data || {},
        header: {
          'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
        },
        success: function (res) {
          params.success && params.success(res)
          wx.hideToast()
        },
        fail: function (res) {
          params.fail && params.fail(res)
        },
        complete: function (res) {
          params.complete && params.complete(res)
        }
      })
    }
    
    const bindCode = function (params) { wxRequest(params, host + '/AppPhone/Api') }
    const startScan = function (params) { wxRequest(params, host + '/AppPhone/Api') }
    const imgToservers =  function (params) { wxRequest(params, host + '/AppPhone/Api/upload_files') }
    
    module.exports = {
      bindCode,
      startScan,
      imgToservers
    }

    4、在js中调用

    import api from '../../api/api.js'
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        shopCode: '',
        deviceId: '',
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        var getShopInfo = wx.getStorageSync('shopInfo');
        if (getShopInfo) {
          this.setData({
            shopCode: getShopInfo.shop_code,
            deviceId: getShopInfo.device_id
          })
        }else{
          wx.redirectTo({
            url: '../bindnum/bindnum?type=1'
          })
        }
      },
      beginScan: function(){
        var _that = this;
        api.startScan({
          method: 'POST',
          data: {
            shop_code: this.data.shopCode,
            device_id: this.data.deviceId,
            method: 'get_phone_scanner_id'
          },
          success: function(res){
            console.log(res.data);
          }
        });
      },
    })

    5、问题

    一开始wx.request中header设置为

    header: {
        'content-type': 'application/json' // 默认值
    },
    导致接口调用时,报500

    后面查找发现,终于找到了解决方案,将header设置为:
      header: {
          'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
      },

    就可以成功调用了

    参考文章: wx.request发送与服务端接受

     
  • 相关阅读:
    Linux ansible的group模块
    ansible copy 模块详解
    Linux centos yum仓库 自制
    ansible 的playbook脚本
    Linux centos 监控备份
    Linux centos nginx下载安装初步
    周总结5
    周总结4
    爬取
    结对开发
  • 原文地址:https://www.cnblogs.com/rachelch/p/11430545.html
Copyright © 2011-2022 走看看