微信小程序使用es6封裝http請求

公司前段時間研究跨端融合，發現有一款框架名叫hera，可以將微信小程序直接編譯爲native應用，沒錯，就是apk的那種安裝包……

遂開始了研究……

因爲之前有過vue的編碼經驗，而小程序又是mvvm的數據驅動型框架，上手相對還是比較快的。

此乃前言。

打開看了下官方文檔，微信自帶的http請求已經很簡潔了，傳入相應的參數和地址，還有回調，便能方便的完成請求。不過我本人不是很喜歡回調，再加上token等驗證請求需要特定處理，便打算自己動手封裝，操作實踐一下。

說一下思路，創建Request類，類內聲明相關屬性與操作，例如get請求就是request類下的一個方法，在app.js引用後掛載到全局，即可方便優雅的調用。（ps：當初考慮到將請求方法當作參數傳遞，例如post，put，delete這些，這樣Request就只用實現一個方法，但是會使參數列表太冗長，而且封裝的方法對請求body和參數的處理有些繁瑣，就分開寫了，讀者也可以自行實踐）以下是代碼實現。

在app.js下同級創建文件，命名爲util.js，用以聲明request

import {
  INTERFACE
} from "./namespace.js"


class Request {
  constructor() {
    this.url = INTERFACE;
  }
  // params接受傳入參數爲對象/字符串，對象會以參數列表拼在url後，字符串則接在url之後
  GET(url, params) {
    var _params = ''
    if (typeof params == 'object') {
      let index = 0;
      for (var key in params) {
        _params += (index === 0 ? '?' : '&') + key + '=' + params[key];
        index++;
      }
    } else if (typeof params == 'string') {
      _params += params;
    } else {
      _params = ''
    }
    return new Promise((resolve, reject) => {
      wx.request({
        url: this.url['path'] + this.url[url] + _params,
        method: 'GET',
        header: {
          'Content-Type': 'application/json',
          'token': wx.getStorageSync('token')
        },
        success: res => {
          if (res.statusCode == 200 && res.data.code == 0) {
            resolve(res.data);
          } else {
            reject(res.data)
          }
        },
        fail: res => {
          reject(res.data)
        }
      })
    });
  }
  // post請求接受參數爲json對象，作爲請求體傳遞給後臺，需要與後臺小夥伴商議好傳輸方式
  POST(url, params) {
    return new Promise((resolve, reject) => {
      // console.log(url)
      wx.request({
        url: this.url['path'] + this.url[url],
        data: params,
        method: 'POST',
        header: {
          'content-Type': 'application/json',
          'token': wx.getStorageSync('token')
        },
        success: res => {
          resolve(res.data);
        },
        fail: res => {
          reject(res.data)
        }
      })
    });
  }
}


module.exports = {
  Request
}

創建namespace，內存儲接口地址。

var app = getApp()
const INTERFACE = {
  path: '基地址',
  login: 'login,
}
export {
  INTERFACE
}

在app.js引用util，掛載在全局app上

//app.js
import util from "./util.js"
App(
  util: util
})

在頁面文件內使用

    var r = new app.util.Request();
    r.POST('login')
      .then((res) => {
        console.log(res);
      })
      .catch((error) => {
        console.error(error)
      })

有問題可以在留言區諮詢