小程序网络请求封装

官方示例代码

wx.request({
  url: 'test.php', //仅为示例，并非真实的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默认值
  },
  success (res) {
    console.log(res.data)
  }
})

data 参数说明
最终发送给服务器的数据是 String 类型，如果传入的 data 不是 String 类型，会被转换成 String 。转换规则如下：

• 对于 GET 方法的数据，会将数据转换成 query
  string（encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)...）
• 对于 POST 方法且 header['content-type'] 为 application/json 的数据，会对数据进行 JSON 序列化
• 对于 POST 方法且 header['content-type'] 为 application/x-www-form-urlencoded 的数据，会将数据转换成 query string

拿着代码赶紧尝试了一波，呜呜呜~ “对方不想理你并向你抛出一个异常 ”

原来域名使用是有限制的

然而我使用的是http的，那可咋整勒，网上查找了一波，在开发工具的右上角【详情】>【本地设置】中，把不校验合法域名的勾选

嗯，不错， 日志打印了，心情瞬间大好，哈哈哈，我们接着往下整

/**
 * function:  封装GET请求 
 * @url       请求地址
 * @params    请求参数  
 * @onSuccess 成功回调
 * @onFailed  失败回调
 */
function requestGet(url, params, onSuccess, onFailed) {
  request(true, "GET", url, params, onSuccess, onFailed);
}

/**
 * function:  封装POST请求 
 * @url       请求地址
 * @params    请求参数  
 * @onSuccess 成功回调
 * @onFailed  失败回调
 */
function requestPost(url, params, onSuccess, onFailed) {
  request(true, "POST", url, params, onSuccess, onFailed);
}

/**
 * function:  封装网络请求
 * @loading   是否显示加载进度
 * @method    请求方式：GET/POST
 * @url       请求地址
 * @params    请求参数  
 * @onSuccess 成功回调
 * @onFailed  失败回调
 */
function request(loading, method, url, params, onSuccess, onFailed) {
  let content_type = '';
  if (method == "GET" || method == "get")
    content_type = 'application/json';
  else
    content_type = 'application/x-www-form-urlencoded';
  showLoading(loading);
  wx.request({
    url: url,
    data: params,
    method: method,
    header: {
      'content-type': content_type
    },
    success: function (res) {
      if (res.data) {
        console.log("server-data==" + JSON.stringify(res.data))
        if (res.data.status == "y") {
          onSuccess(res.data.result); //request success
        } else {
          onFailed(res.data.info); //request failed
        }
      }
    },
    fail: function (error) {
      onFailed("网络请求失败，稍后再试")//failure for other reasons
    },
    complete: function (res) {
      if (loading)
        wx.hideLoading()
    }
  })
}

/**
 * function:  封装网络请求
 * @loading   是否显示加载进度
 * @method    请求方式：GET/POST
 * @url       请求地址
 * @params    请求参数  
 * @onSuccess 成功回调
 * @onFailed  失败回调
 * @onComplete 执行完成
 */
function requestComplete(loading, method, url, params, onSuccess, onFailed, onComplete) {
  let content_type = '';
  if (method == "GET" || method == "get")
    content_type = 'application/json';
  else
    content_type = 'application/x-www-form-urlencoded';
  showLoading(loading);
  wx.request({
    url: url,
    data: params,
    method: method,
    header: {
      'content-type': content_type
    },
    success: function (res) {
      if (res.data) {
        console.log("server-data==" + JSON.stringify(res.data))
        if (res.data.status == "y") {
          onSuccess(res.data.result); //request success
        } else {
          onFailed(res.data.info); //request failed
        }
      }
    },
    fail: function (error) {
      onFailed("网络请求失败，稍后再试")//failure for other reasons
    },
    complete: function (res) {
      onComplete("网络请求完成。")
    }
  })
}
function showLoading(loading) {
  if (loading) {
    wx.showLoading({
      title: "正在加载中...",
    })
  }
}

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

module.exports = {
  request: request,
  requestGet: requestGet,
  requestPost: requestPost,
  requestComplete: requestComplete,
}

post请求.png
get请求.png
image.png
image.png