# 功能概述
[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)
})
})
}
}
```
- 內容介紹
- EcmaScript基礎
- 快速入門
- 常量與變量
- 字符串
- 函數的基本概念
- 條件判斷
- 數組
- 循環
- while循環
- for循環
- 函數基礎
- 對象
- 對象的方法
- 函數
- 變量作用域
- 箭頭函數
- 閉包
- 高階函數
- map/reduce
- filter
- sort
- Promise
- 基本對象
- Arguments 對象
- 剩余參數
- Map和Set
- Json基礎
- RegExp
- Date
- async
- callback
- promise基礎
- promise-api
- promise鏈
- async-await
- 項目實踐
- 標簽系統
- 遠程API請求
- 面向對象編程
- 創建對象
- 原型繼承
- 項目實踐
- Classes
- 構造函數
- extends
- static
- 項目實踐
- 模塊
- import
- export
- 項目實踐
- 第三方擴展庫
- immutable
- Vue快速入門
- 理解MVVM
- Vue中的MVVM模型
- Webpack+Vue快速入門
- 模板語法
- 計算屬性和偵聽器
- Class 與 Style 綁定
- 條件渲染
- 列表渲染
- 事件處理
- 表單輸入綁定
- 組件基礎
- 組件注冊
- Prop
- 自定義事件
- 插槽
- 混入
- 過濾器
- 項目實踐
- 標簽編輯
- 移動客戶端開發
- uni-app基礎
- 快速入門程序
- 單頁程序
- 底部Tab導航
- Vue語法基礎
- 模版語法
- 計算屬性與偵聽器
- Class與Style綁定
- 樣式與布局
- Box模型
- Flex布局
- 內置指令
- 基本指令
- v-model與表單
- 條件渲染指令
- 列表渲染指令v-for
- 事件與自定義屬性
- 生命周期
- 項目實踐
- 學生實驗
- 貝店商品列表
- 加載更多數據
- 詳情頁面
- 自定義組件
- 內置組件
- 表單組件
- 技術專題
- 狀態管理vuex
- Flyio
- Mockjs
- SCSS
- 條件編譯
- 常用功能實現
- 上拉加載更多數據
- 數據加載綜合案例
- Teaset UI組件庫
- Teaset設計
- Teaset使用基礎
- ts-tag
- ts-badge
- ts-button
- ta-banner
- ts-list
- ts-icon
- ts-load-more
- ts-segmented-control
- 代碼模版
- 項目實踐
- 標簽組件
- 失物招領客戶端原型
- 發布頁面
- 檢索頁面
- 詳情頁面
- 服務端開發技術
- 服務端開發環境配置
- Koajs快速入門
- 快速入門
- 常用Koa中間件介紹
- 文件上傳
- RestfulApi
- 一個復雜的RESTful例子
- 使用Mockjs生成模擬數據
- Thinkjs快速入門
- MVC模式
- Thinkjs介紹
- 快速入門
- RESTful服務
- RBAC案例
- 關聯模型
- 應用開發框架
- 服務端開發
- PC端管理界面開發
- 移動端開發
- 項目實踐
- 失物招領項目
- 移動客戶端UI設計
- 服務端設計
- 數據庫設計
- Event(事件)
- 客戶端設計
- 事件列表頁面
- 發布頁面
- 事件詳情頁面
- API設計
- image
- event
- 微信公眾號開發
- ui設計規范