微信小程序 使用 fly接口請求框架

fly簡介

微信小程序的 javascript運行環境和瀏覽器不一樣，頁面的腳本邏輯是在JsCore中運行，JsCore是一個沒有窗口對象的環境，因此不能在腳本中使用window，也沒法在腳本中操做組件，JsCore中也沒有 XmlhttpRequest對象，因此jquery 、zepto、axios這些在小程序中都不能用，而此時，正是 fly 大顯身手的時候。

詳細API，移步官方文檔： flyio幫助文檔.

使用步驟

1. 從官網下載wx.umd.min.js或者wx.js文件，保存在項目中。不建議使用cdn連接，防止連接失效。wx.js中有適配小程序請求的方法，有興趣的能夠本身研讀，官網也有詳細介紹。
2. 封裝一個fly請求

import Fly from './wx.umd.min.js';
// 將一些全局變量存在app實例的globalData中
const app = getApp();
const baseApiUrl = app.globalData.baseApiUrl;
const application = app.globalData.application;
// 定義一些接口狀態碼須要提示的文案，用做錯誤提示
const statusText = {
    0: '網絡鏈接異常',
    1: '網絡鏈接超時',
    401: '用戶未登陸',
    403: '無權限訪問該資源',
    404: '資源不存在',
    405: '請求方法不容許',
    500: '網絡異常，請檢查網絡',
    503: '服務不可用',
    504: '網關超時'
};

const fly = new Fly();
// 統一配置請求baseUrl
fly.config.baseURL = baseApiUrl;
// 統一配置超時時間
fly.config.timeout = 5000;

// 請求攔截，在這裏面作一些個性化配置
fly.interceptors.request.use((request) => {
    /** * 演示： * 給全部請求的請求頭加端application標識（若是應用場景不須要就不用些） */
    request.headers = {
        'application': application
    };

    /** * 演示： * 給全部請求參數添加application參數（若是應用場景不須要就不用些） */
    if (request.method === 'GET') {
        request.params.application = application;
    }
    if (request.method === 'POST' || request.method === 'PUT' || request.method === 'DELETE') {
        // 請求不傳參數時，request.body爲undefined
        if (request.body) {
            request.body.application = application
        } else {
            request.body = {
                application
            };
        }
    }

    // .....
    // .....
    // .....
    
    return request;
});

// 響應攔截，在這裏面對接口響應作處理。
fly.interceptors.response.use((response, promise) => {
        return promise.resolve(response.data);
    }, (err, promise) => {
        let msg;
        msg = err.response.data.message ? err.response.data.message : (statusText[err.status] ? statusText[err.status] : '請求數據失敗,請稍後再試');
        // 詳細緣由，可參照另外一篇文章。
        wx.showToast({
           title: msg,
           mask: true,
           icon: 'none',
           duration: 2000
        });
        return promise.reject();
    }
);

export default fly;

1. 定義接口方法（也能夠直接在js文件中直接使用，不過直接使用看起來代碼不整潔，並且接口定義查找，大項目建議統一文件管理）

import fly from './fly/fly';

// 訂單模塊調用的接口
// post, get, delete, put請求方式以下：
const order = {
   getTyreOrderCount: (data) => fly.delete('/lynx-goods/api********', data),
   cancelTyreOrder: (data) => fly.put('/lynx-goods/api********'', data),
   getTyreOrderList: (data) => fly.get('/lynx-goods/api/api********', data),
   getDrawPopup: (data) => fly.post('/api********'', data),
   //......
};

export default order;

1. 調用封裝後的請求

import api from '../../request/order';
const data = {
   // ...
}
api.getTyreOrderCount(data).then((res) => {
   	 // 成功時數據處理
     console.log(res);
   }).catch(err => {
     // 失敗時的處理
  	 console.log(err);
   });
})

5.至此一套完整的fly使用過程就差很少啦。不過fly也不是全能的，閱讀他的源碼能夠發現該請求框架只能實現通常請求的請求方法（get，post，put， patch，head，delete），不能支持微信小程序一些獨有的api（好比上傳文件的wx.uploadFile方法），這個時候咱們就只能再封裝一個原生的微信小程序請求了。使用的時候只須要導入這個方法，wxRequest.uploadFile(’****’, url)便可。

let wxRequest = {
  uploadFile: function (url, filePath) {
      return new Promise((resolve, reject) => {
          wx.uploadFile({
              url: baseApiUrl + url,
              filePath: filePath,
              name: 'multipartFile',
              header: {
                  'content-type': 'multipart/form-data',
                  'Authorization': '***',
                  'application': application
              },
              success(res) {
                  if (res.statusCode < 400) {
                      resolve(res);
                  }
                  reject(res);
              },
              fail(res) {
                  reject(res)
              }
          })
      })
  }
}
export default wxRequest;

flyio源碼解析

Fly對小程序的支持其實是經過自定義 http engine的方式，咱們來看一下wx.js源碼：

//微信小程序入口
var  Fly=require("./fly")
var EngineWrapper = require("./engine-wrapper")
var adapter = require("./adapter/wx") //微信小程序adapter
var wxEngine = EngineWrapper(adapter)
module.exports=function (engine) {
    return new Fly(engine||wxEngine);
}

能夠看出，關鍵代碼就在adapter/wx中，咱們看看微信小程序的adapter代碼：

//微信小程序適配器
module.exports=function(request, responseCallback) {
    var con = {
        method: request.method,
        url: request.url,
        dataType: request.dataType||"text",
        header: request.headers,
        data: request.body||{},
        success(res) {
            responseCallback({
                statusCode: res.statusCode,
                responseText: res.data,
                headers: res.header,
                statusMessage: res.errMsg
            })
        },
        fail(res) {
            responseCallback({
                statusCode: res.statusCode||0,
                statusMessage: res.errMsg
            })
        }
    }
    //調用微信接口發出請求
    wx.request(con)
}

這就是全部的實現。fly正是經過不一樣的adpter來支持不一樣的環境，至於其它的環境，咱們徹底能夠同樣實現~~~

ヾ(◍°∇°◍)ﾉﾞ~