微信小程序 | 易学教程

1. 文件一：网络请求的服务配置

const config = {
// 测试
  baseUrl: 'https://+域名+/login',
  .......
}
export default config

2. 文件二：请求处理的封装：

function post(url, params, onSuccess, onFailed) {
  request(url, params, "POST", onSuccess, onFailed);
}
function get(url, params, onSuccess, onFailed) {
  request(url, params, "GET", onSuccess, onFailed);
}
/**
 * function: 封装网络请求
 * @url URL地址
 * @params 请求参数
 * @method 请求方式：GET/POST
 * @onSuccess 成功回调
 * @onFailed  失败回调
 */

function request(url, params, method, onSuccess, onFailed) {
  wx.showLoading({
    title: "正在加载中...",
  })
  var header = {
    'content-type': 'application/x-www-form-urlencoded',
    'token': 请求所需的token,
  }
  wx.request({
    url: url,
    data: dealParams(params),
    method: method,
    header: header,
    success: function (res) {
      wx.hideLoading();
      if (res.data) {
        /** start 根据需求 接口的返回状态码进行处理，根据需要处理不同的状态 */
        if (res.data.code == 200) {
          onSuccess(res.data); //request success
        }else {
          wx.showToast({
            title: res.data.msg,
            icon: 'none'
          })
        }
        /** end 处理结束*/
      }
    },
    fail: function (error) {
      onFailed(error); //failure for other reasons
    }
  })
}

/**
 * function: 根据需求处理请求参数：添加固定参数配置等
 * @params 请求参数
 */
function dealParams(params) {
  // console.log("请求参数:", params)
  return params;
}


// 1.通过module.exports方式提供给外部调用
module.exports = {
  postRequest: post,
  getRequest: get,
}

3. 文件三: 全局引用配置文件（app.js）：

import api from './utils/config.js'

globalData: {
    baseUrl: api.baseUrl,
}

4. 文件四：使用

let obj = {
      username: '13888888888',
      password: '123456'
    }
    http.postRequest(app.globalData.baseUrl+  '/login',obj,
      function(res) {
        // 逻辑处理
      },
      function(err) {

      })

来源：oschina

链接：https://my.oschina.net/u/2844166/blog/4414167

标签

微信小程序

App.js