【小程序】請求與封裝

【原文：請求與封裝】

微信小程序進行網絡通訊，只能和指定的域名進行通訊，微信小程序包括四種類型的網絡請求。

請求	方法
普通HTTPS請求	wx.request
上傳文件	wx.uploadFile
下載文件	wx.downloadFile
WebSocket通訊	wx.connectSocket

這裏主要對普通HTTPS請求作一次詳細介紹。

普通HTTPS請求

要微信小程序進行網絡通訊，必須先設置域名，否則會提示不合法。設置域名的信息能夠在開發者工具-詳情-域名信息中看到。

使用wx.request能夠發起一個http請求

wx.request({
  url: 'test.php', // 開發者服務器接口地址 data: { // 請求的參數 x: '', y: '' }, method: 'GET', // HTTP 請求方法, 默認GET header: { // 設置請求的 header 'content-type': 'application/json', // 默認值 'cookie': 'token=' + token }, dataType: 'json', // 返回的數據格式, 默認json responseType: 'text', // 響應的數據類型, 默認text success (res) { // 接口調用成功的回調函數 console.log(res.data) }, fail () { // 接口調用失敗的回調函數 }, complete () { // 接口調用結束的回調函數（調用成功、失敗都會執行） } }) 

請求封裝

但在平時項目使用中，咱們每每會對HTTP請求作一層封裝。這裏介紹兩種方法：1. 回調函數 2. promise

第一種 回調函數

假設項目中有一個文件爲http.js， 裏面存在以下代碼

// http.js var api_base_url = 'pay.tairanmall.com' var token = 'some code as token' /** * 傳入params對象，url, data, method, failBack, successBack **/ export default function (params){ if(!params.method){ params.method = "GET" } wx.request({ url: api_base_url + params.url, method: params.method, data: params.data, header:{ 'content-type':'application/json', 'cookie': 'token=' + token }, success:function(res){ let code = res.statusCode.toString() if (code.startsWith('2')){ params.successBack && params.successBack(res.data) } else{ params.failBack && params.failBack(res.data) wx.showToast({ title: res.data.error.description, icon: 'none', duration: 2000 }) } }, fail:function(err){ // some fail code } }) } 

你在api.js文件中，引入http.js文件，代碼以下

// api.js import http from 'http.js' function getOrderDetailData(params,successBack,failBack) { http({ method: 'POST', url: '/some/url', data: params, successBack: successBack, failBack: failBack }) } export { getOrderDetailData } 

之因此不在頁面中直接引入引入http.js，而加了一層api.js文件，是爲了項目的規範性和可維護性等方面考慮的。把全部的http請求地址集中在一個文件中，可以更加直觀看到項目使用了哪些接口，使得後續的項目開發維護以及項目優化迭代更加容易。（舉例：接口更換）

最後在某個頁面中使用 home/home.js

// home/home.js import { getOrderDetailData } from 'api.js' Page({ /** * 頁面的初始數據 */ data: { payId: '', // 支付訂單ID orderDetail: {}, // 訂單詳情 }, /** * 頁面顯示的時候 */ onShow: function () { // 請求獲取訂單信息 this.getOrderDetail({ payId: this.data.payId}) }, /** * 獲取訂單信息 */ getOrderDetail: function (params) { let _this = this getOrderDetailData(params, function (data) { _this.setData({orderDetail: data}) }) } }) 

上述的代碼仍是比較清晰的，可是當項目變得臃腫且業務代碼繁雜的時候，過多的回調函數經常會使得代碼難以理解和維護。 代碼中每一層的回調函數都須要依賴上一層的回調執行完，造成層層嵌套的關係，就會產生回調地域。相似以下代碼

import { getA, getB, getC, getD } from 'api.js' function callback () { getA({id: 'A'}, function (Adata) { getB({id: Adata.id}, function(Bdata){ getC({id: Bdata.id}, function(Cdata) { getD({id: Cdata.id}, function() { ... }) }) }) }) } 

上述代碼無疑是不利於咱們閱讀與維護的，接下來介紹使用PROMISE。

 

第二種 PROMISE

首先先介紹一下Promise，如下摘自阮一峯老師的《ES6入門》

它是異步編程的一種解決方案，比傳統的解決方案——回調函數和事件——更合理和更強大。 簡單說它就是一個容器，裏面保存着某個將來纔會結束的事件（一般是一個異步操做）的結果。從語法上說，Promise 是一個對象，從它能夠獲取異步操做的消息。Promise 提供統一的 API，各類異步操做均可以用一樣的方法進行處理。 Promise對象表明一個異步操做，有三種狀態：pending（進行中）、fulfilled（已成功）和rejected（已失敗）。 有了Promise對象，就能夠將異步操做以同步操做的流程表達出來，避免了層層嵌套的回調函數。此外，Promise對象提供統一的接口，使得控制異步操做更加容易。

假設項目中有一個文件爲http.js， 裏面存在以下代碼

// http.js var api_base_url = 'pay.tairanmall.com' var token = 'some code as token' export default function ({url, data={},method='GET'}) { return new Promise((resolve, reject)=>{ wx.request({ url: api_base_url + url, method: method, data: data, header:{ 'content-type':'application/json', 'cookie': 'token='+token }, success:(res)=>{ const code = res.statusCode.toString() if (code.startsWith('2')){ resolve(res.data) } else{ reject(res.data) wx.showToast({ title: res.data.error.description, icon: 'none', duration: 2000 }) } }, fail:(err)=>{ } }) }) } 

你在api.js文件中，引入http.js文件，代碼以下

// api.js import http from 'http.js' function getOrderDetailData(params) { return http({ method: 'POST', url: '/some/url', data: params }) } export { getOrderDetailData } 

最後在某個頁面中使用 home/home.js

// home/home.js import { getOrderDetailData } from 'api.js' Page({ /** * 頁面的初始數據 */ data: { payId: '', // 支付訂單ID orderDetail: {}, // 訂單詳情 }, /** * 頁面顯示的時候 */ onShow: function () { // 請求獲取訂單信息 this.getOrderDetail({ payId: this.data.payId}) }, /** * 獲取訂單信息 */ getOrderDetail: function (params) { getOrderDetailData(params).then(data=> { this.setData({orderDetail: data}) }) } }) 

import { getA, getB, getC, getD } from 'api.js' function callback () { getA({id: 'A'}).then(Adata => { return getB({id: Adata.id}) }).then(Bdata => { return getC({id: Bdata.id}) }).then(Cdata => {s return getD({id: Cdata.id}) }).then(Ddata => { ... }) } 

使用function定義的函數，this的指向隨着調用環境的變化而變化的，而箭頭函數中的this指向是固定不變的，一直指向的是定義函數的環境。

 

----------------------------------------

小程序系列：

  前言

  項目結構

  生命週期

  請求與封裝

  數據綁定

  事件

  基礎使用： component使用 、 wxs使用 、 節點操做 、 頁面跳轉 、 緩存

  前端架構淺談

----------------------------------------