# 功能概述 [Fly.js](https://github.com/wendux/fly) 一個基于Promise的、強大的、支持多種JavaScript運行時的http請求庫. 有了它，您可以使用一份http請求代碼在瀏覽器、微信小程序、Weex、Node、React Native、快應用中都能正常運行。同時可以方便配合主流前端框架 ，最大可能的實現 Write Once Run Everywhere。 Fly.js 是一個基于 promise 的，輕量且強大的Javascript http 網絡庫，它有如下特點： 1. 提供統一的 Promise API。 2. 瀏覽器環境下，**輕量且非常輕量**。 3. 支持多種JavaScript 運行環境 4. 支持請求／響應攔截器。 5. 自動轉換 JSON 數據。 6. **支持切換底層 Http Engine，可輕松適配各種運行環境**。 7. **瀏覽器端支持全局Ajax攔截 。** 8. **H5頁面內嵌到原生 APP 中時，支持將 http 請求轉發到 Native。支持直接請求圖片**。 # 引入fly Flyio在各個平臺下的標準API是一致的，只是入口文件不同，在微信小程序中引入： Npm安裝：`npm install flyio --save`. ~~~ var Fly=require("flyio/dist/npm/wx") var fly=new Fly() ~~~ 引入之后，您就可以對fly實例進行全局配置、添加攔截器、發起網絡請求了。 # 使用 Fly基于Promise提供了Restful API，你可以方便的使用它們，具體請參考[fly 文檔](https://github.com/wendux/fly) 。下面給出一個簡單的示例 ~~~ //添加攔截器 fly.interceptors.request.use((config,promise)=>{ //給所有請求添加自定義header config.headers["X-Tag"]="flyio"; return config; }) //配置請求基地址 fly.config.baseURL='http://www.dtworkroom.com/doris/1/2.0.0/' ... method: { //事件處理函數 bindViewTap: function() { //發起get請求 fly.get("/test",{xx:6}).then((d)=>{ //輸出請求數據 console.log(d.data) //輸出響應頭 console.log(d.header) }).catch(err=>{ console.log(err.status,err.message) }) ... } } ~~~ ## 在uni-app中使用 在[uni-app](https://uniapp.dcloud.io/) 中您也可以將fly實例掛在vue原型上，這樣就可以在任何組件中通過`this`方便的調用： ~~~ var Fly=require("flyio/dist/npm/wx") var fly=new Fly ... //添加全局配置、攔截器等 Vue.prototype.$request=fly //將fly實例掛在vue原型上 ~~~ 在組件中您可以方便的使用： ~~~ this.$request.get("/test",{xx:6}).then((d)=>{ //輸出請求數據 console.log(d.data) //輸出響應頭 console.log(d.header) }).catch(err=>{ console.log(err.status,err.message) }) ~~~ # 封裝 實現了基于Token的通訊機制，Token通過store保存在本地。 假設服務端基于Thinkjs實現的Restful服務，API返回的數據格式 ``` { errno:0, //錯誤代碼 errmsg:'', //錯誤消息 data:'' //業務數據 } ``` 錯誤代碼表 | 錯誤代碼 | 錯誤描述 | |----------|-------------| | 0 | API正常訪問 | | 1000 | API沒有授權訪問 | | 1001 | API參數校驗錯誤 | ## 攔截器封裝 ``` // common/request.js // 目前沒有針對uni的Fly版本，使用wx版本沒有問題 import store from '@/store' // H5版本 // #ifdef H5 import Fly from 'flyio/dist/npm/fly' // #endif //微信小程序和APP版本 // #ifndef H5 import Fly from 'flyio/dist/npm/wx' // #endif const request = new Fly(); request.interceptors.request.use((request) => { uni.showLoading({ title: '正在努力加載中...' }); request.baseURL = 'http://127.0.0.1:8360/admin'; const token = store.getters['token/getToken']; if (token) { //給所有請求添加自定義header request.headers["Authorization"] = token; } // 防止緩存 if (request.method === 'POST' && request.headers['Content-Type'] !== 'multipart/form-data') { request.body = { ...request.body, _t: Date.parse(new Date()) / 1000 } } else if (request.method === 'GET') { request.params = { _t: Date.parse(new Date()) / 1000, ...request.params } } return request }) request.interceptors.response.use(function(response) { //不要使用箭頭函數，否則調用this.lock()時，this指向不對 let errmsg = ''; const data = response.data; if (!data || typeof data !== 'object') { errmsg = '服務器響應格式錯誤'; uni.showToast({ title: errmsg, icon: 'none' }) } else { const errno = data.errno; switch (errno) { case 1001: // 數據檢驗未通過 for (let i in data.data) { errmsg += data.data[i] + ';' } break; default: errmsg = data.errmsg; break } if (errmsg !== '' && errno !== 0) { uni.showToast({ title: errmsg, icon: 'none' }) } if (errmsg !== '' && errno === 0) { uni.showToast({ title: errmsg, icon: 'none' }) } } uni.hideLoading(); return response.data; //只返回業務數據部分 }, function(err) { // console.log("error-interceptor:" + JSON.stringify(err)) let errmsg = err.message; switch (err.status) { case 0: errmsg = "網絡連接錯誤"; uni.showToast({ title: errmsg, icon: 'none' }) break; case 401: store.dispatch('logout'); uni.redirectTo({ url: '/pages/auth/login' }) break; default: uni.showToast({ title: errmsg, icon: 'none' }) } }) export default request export { request } ``` # 使用request 約定將所有的Restful API請求封，并命名方便頁面調用。統一API管理可以降低后續維護的難度。 ``` import request from '@/common/request' export default { create(data) { return new Promise((resolve, reject) => { request.post('/esc/company', data).then(response => { resolve(response) }) }) }, getList(map = {}) { return new Promise((resolve, reject) => { request.get('/esc/company', map).then(response => { console.log(response) resolve(response) }) }) }, getInfo(id, map = {}) { return new Promise((resolve, reject) => { request.get('/esc/company/' + id, { params: map }).then(response => { resolve(response) }) }) }, update(id, data={}) { return new Promise((resolve, reject) => { request.put('/esc/company/' + id, data).then(response => { resolve(response) }) }) }, delete(id) { return new Promise((resolve, reject) => { request.delete('/esc/company/' + id).then(response => { resolve(response) }) }) } } ```