zoukankan      html  css  js  c++  java
  • 微信小程序HTTPS接口请求封装

    微信小程序开发过程中,经常会用到 wx:request 方法发起HTTPS网络请求来调用后台的接口方法,过多的调用会产生代码冗余,本篇博客介绍如何在微信小程序中封装HTTPS接口请求

    wx:request官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html

    1、封装方法

    在 utils 文件夹下添加 request.js 文件,添加如下代码

    var app = getApp(); //获取小程序全局唯一app实例
    var host = '******************'; //接口地址
    
    //url:接口
    //postData:参数
    //doSuccess:成功的回调函数
    //doFail:失败的回调函数
    
    //POST请求
    function post(url, postData, doSuccess, doFail) {
      request(url, postData, "POST", doSuccess, doFail);
    }
    
    //GET请求
    function get(url, postData, doSuccess, doFail) {
      request(url, postData, "GET", doSuccess, doFail);
    }
    
    function request(url, postData, method, doSuccess, doFail) {
      wx.showLoading({
        title: "正在加载中...",
      })
      wx.request({
        url: host + url, //请求地址
        method: method, //请求方法
        header: { //请求头
          "Content-Type": "application/json;charset=UTF-8"
        },
        data: postData, //请求参数    
        dataType: 'json', //返回数据格式
        responseType: 'text', //响应的数据类型
        success: function(res) {
          wx.hideLoading();
          //成功执行方法,参数值为res.data,直接将返回的数据传入
          doSuccess(res.data);
        },
        fail: function() {
          //失败执行方法
          doFail();
        },
      })
    }
    //module.exports用来导出代码
    //js文件中通过var http = require("../../util/request.js")加载
    module.exports = {
      postRequest: post,
      getRequest: get,
    }

    tips:请求头 header 默认为 application/json ,如果设置不校验合法域名、web-view(业务域名)、TLS版本以及HTTPS证书,需修改请求头 header为HTTP请求头: application/x-www-form-urlencoded,否则post请求时将会报错,正式开发环境中可忽略,直接使用默认请求头 application/json

    2、调用方法

    2.1 .js文件中引入request.js文件

    var http = require('../../utils/request.js'); //相对路径

    tips:注意路径正确与否,若请求报错可考虑是路径问题

    2.2 调用请求方法(post请求为例)

    var params = {//请求参数
      aid: this.optionaid, //id
      aname: this.data.receiving, //收货人
      atell: this.data.tell, //联系方式
      adetailed: this.data.detailed, //详细地址
    }
    http.postRequest("EditAddress/EditAddressInfo", params, function(res) {
      console.log("修改成功!");
      wx.navigateTo({
        url: '/pages/address/address',
      })
    }, function(res) {
      console.log("修改失败!!!")
    })

    End!

  • 相关阅读:
    ASP.Net MVC Session和Cookies的简单使用
    MVC基础知识点
    MVC中路由配置
    MVC Controller接受ajax post传输的List<Entity>数据
    《大道至简》第五章读后感
    字符串课后作业
    《大道至简》第四章读后感
    类和对象课后作业
    《大道至简》第三章读后感
    java 语言基础作业
  • 原文地址:https://www.cnblogs.com/gygg/p/12710806.html
Copyright © 2011-2022 走看看