fly简介
微信小程序的 javascript运行环境和浏览器不同，页面的脚本逻辑是在JsCore中运行，JsCore是一个没有窗口对象的环境，所以不能在脚本中使用window，也无法在脚本中操作组件，JsCore中也没有 XmlhttpRequest对象，所以jquery 、zepto、axios这些在小程序中都不能用，而此时，正是 fly 大显身手的时候。
详细API，移步官方文档： flyio帮助文档.
使用步骤
- 从官网下载wx.umd.min.js或者wx.js文件，保存在项目中。不建议使用cdn链接，防止链接失效。
- 封装一个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;
- 定义接口方法（也可以直接在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;
- 调用封装后的请求
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来支持不同的环境，至于其它的环境，我们完全可以一样实现~~~
ヾ(◍°∇°◍)ﾉﾞ~
