# 功能概述
[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设计规范