es6 promise— 封装HTTP请求

刚开始开发微信小程序一直用的一位大神的微信小程序的http封装

这里附上传送门，有详细说明，我就不说了

传送门

 appRequest(methods, url, data, callback, errFun) {
    wx.request({
      url: url,
      method: methods,
      header: {
        'content-type': methods == 'GET' ? 'application/json' : 'application/x-www-form-urlencoded',
        "cookie": "t=" + wx.getStorageSync("t"),
      },
      dataType: 'json',
      data: data,
      success: function(res) {
        callback(res.data);
      },
      fail: function(err) {
        errFun(err);
        wx.showToast({
          title: '服务器错误~',
          icon: 'none'
        })
      }
    });
  }

但是当请求并发复杂的时候，有些问题是不好解决的（比如：异步,回调地狱，请求互调等）

，因此，自己试着改用ES6 的promise进行重新封装

===============================================================================================

在代码里详细说明注释了，拿即可用(这里只做简单说明)

每个人，每个项目需求封装的http是不一样的，可以根据实际业务需求，进行改写----------

因为环境不同切换不同环境， server_address是函数的总地址
const server_address = 'https://地址.com/api'; //接口总地址 测试环境
// const server_address = 'https://地址/api';//接口总地址 生产环境

/ *函数封装两层，界面调用为第三层，优点是，页面调用的时候，完全不用考虑请求，直接根据请求调用不同的方法
 *参数说明：
 * url, 请求地址；  params:请求参数，如果没有 传入{}就好（不以data命名是因为data出现率较高）
 *isLoading 是微信小程序的loading 框  不做微信小程序或者不需要可以摒弃这个参数，删除相关内容便可
* / 

-----判断请求是否成功条件不同，这里是用res.data.meta.success 是否为true 具体看个人需求修改

// 因为环境不同切换不同环境， server_address是函数的总地址
const server_address = 'https://地址.com/api'; //接口总地址 测试环境
// const server_address = 'https://地址/api';//接口总地址 生产环境
/*
*函数封装两层，界面调用为第三层，优点是，页面调用的时候，完全不用考虑请求，直接根据请求调用不同的方法
*参数说明：
* url, 请求地址；  params:请求参数，如果没有 传入{}就好（不以data命名是因为data出现率较高）
*isLoading 是微信小程序的loading 框  不做微信小程序或者不需要可以摒弃这个参数，删除相关内容便可
*/ 
// 方法盒子，封装的第二层
const https = { // 封装http对象
  // isLoading  请求需要loading时加 
  get: function(url, params={}, isLoading=false) {
    return getPromise('GET', url, params, isLoading)
  },
  post: function(url, params={}, isLoading=false) {
    return getPromise('POST', url, params, isLoading)
  },
}
// 封装的第一层，也是函数封装的最底层
const getPromise = (method, url, params, isLoading) => {
  if (isLoading) {
    // 点击事件必加，且防止穿透
    wx.showLoading({
      title: '加载中...',
      mask: true
    });
  }
  let sessionId = wx.getStorageSync("t"); // 这里吧sessionId叫成了t  即微信唯一标识，根据场景需求可以改成不同的命名方式
  return new Promise((resolve, reject) => {
      wx.request({
        url: server_address + url,
        method: method,
        data: params,
        dataType: 'json',
        header: {
          'content-type': method == 'GET' ? 'application/json' : 'application/x-www-form-urlencoded',
          'Cookie': 't=' + sessionId
        },
        success: (res) => {
          // console.log(res);
          // if (sessionId == "" || sessionId == null) {
          //   wx.getStorageSync("t", res.data.info.sessionId); // 本地没有就说明第一次请求，把返回的sessionId 存入本地
          // }
          let data = res.data;
          if (data.meta.success) {
            resolve(res.data);
          } else {
            wx.showToast({
              title:'服务器奔溃',
              icon: 'none',
              duration: 2000,
              mask: true,
            })
          }
        },
        fail: (err) => {
          wx.showToast({
            title: '服务器奔溃啦~~~',
            icon: 'none',
            duration: 2000,
            mask: true
          })
          reject(err.data)
        },
        complete: () => {
          if (isLoading) {
            wx.hideLoading();
          }
        }
      })
    })
    .catch(res => {
      console.log(res);
      wx.showToast({
        title:'请求失败!',
        icon:'none,
      })
    })
}
// 单独放置
 // module.exports = https
export {http}

在js 里调用

如果在微信小程序调用一定要用相对路径，绝对路径会报错，具体可能是微信小程序的bug吧

引用：

// const https = require("../../utils/http.js");
import {http} form("../../utils/http.js");

引用后：

// 根据不同的请求调用不同的方法，
// 如果data为空,还需要loading 则 data 写成{}，如都不需要只写http.get(url).then(res=>{})
// 如果不需要微信的loading 或者不是在微信小程序里写，则不需要第三个参数，如果需要写true
  http.get(url, {},true).then(res => {
      console.log(res);
   })
// 可以不断的.then
    .then(res=>{})