飞。js通过在不同的JavaScript运行时通过在底层切换不同的Http引擎来实现多环境支持,但同时对用户层提供统一,标准的承诺API。不仅如此,Fly.js还支持请求/响应拦截器,自动转化JSON,请求转发等功能,详情请参考:https://github.com/wendux/fly。
下面我们看看在微信小程序,mpvue中和中如何使用飞。
文档
github地址
<强> Flyio的一些特点
飞。js是一个基于承诺的,轻量且强大的Javascript http网络库,它有如下特点:
<李>提供统一API的承诺。
<李>浏览器环境下,轻量且非常轻量。
<李>支持多种JavaScript运行环境李
<李>支持请求/响应拦截器。
<李>自动转换JSON数据。
<李>支持切换底层Http引擎,可轻松适配各种运行环境。
<李>浏览器端支持全局Ajax拦截。
<李> H5页面内嵌到原生中应用时,支持将http请求转发到本机。支持直接请求图片。
在小程序中使用flyio请求,封装代码如下
<强>一、src下新建跑龙套/request.js文件
var飞=要求(“flyio/dist/npm/wx”)
从“. ./跑龙套”进口{getCache}
const请求=new飞()//全局加载提示——设定时间
让ltime=0;
函数closeLoading(参数){
ltime——
}
request.interceptors.request.use((请求)=比;{//全局加载提示——展示提示//wx.showNavigationBarLoading ()
ltime + +
让数据源=getCache(“数据源”)
请求。头={
“内容类型”:“应用程序/x-www-form-urlencoded”,
“源”:“miniApp”,
“数据源”:数据源& # 63;数据源:“
}//没用的到
如果(request.url.indexOf (getReviewInfo) !=1) {
closeLoading ()
返回请求
}//登录
console.log('这是令牌”);
console.log ();
让type=";
如果(request.url.indexOf (“wxLogin”) !=1) {
类型=request.body.loginType;
}
console.log (getCache(“令牌”));
console.log('这是令牌”);
如果(request.url.indexOf (wxLogin)==1 | |类型==肮ぷ魈ā?{//让storeId=getCache (“storeId”);
让storeCode=getCache (“storeCode”);
让邀请人=getCache(“邀请人”);
让牌=getCache(“令牌”);
请求。头={
“内容类型”:“应用程序/x-www-form-urlencoded”,
“源”:“miniApp”,
“令牌”:令牌,
“storeCode”: storeCode,
邀请人:邀请人
}
console.log(“打印请求”);
console.log(请求);
console.log(“打印请求”);
让数据源=getCache(“数据源”)
如果(数据源){
请求。标题(“数据源”)=数据源
}
}
返回请求
}）
request.interceptors.response.use((回应,承诺)=比;{
closeLoading ()//wx.hideNavigationBarLoading ()//微信运维统计
如果(response.status) {
wx。reportMonitor (0, + (response.status))
}
如果(response.headers.date) {
让时间=new日期().getTime()——新的日期(response.headers.date) .getTime ()
wx。reportMonitor(“1”+(时间))
}//错误提示
如果响应。地位!=200){
wx.showToast ({
标题:“出错啦!请稍后再试试哦~”,
图标:“没有”,
持续时间:2000
}）
}
返回promise.resolve (response.data)
},
(呃,承诺)=比;{
wx.hideNavigationBarLoading ()
返回promise.resolve ()
}
)
出口默认请求
<强>二,src下新建跑龙套/api。js文件
出口const baseUrlApi=' http://192.168.128.242:8080 '//- - - - - -开发调试环境//导出const baseUrlApi=' https://test.mini.com '//- - -测试环境https//导出const baseUrlApi=' https://product.mini.com '//- - - - - -生产环境https
这个里面可以写不同环境或者调试的接口地址
<强>三,src下新建服务文件夹
在这个下面不同的模块简历不同的js文件,例如:login-service.js, order-service.js
里面代码示例如下
进口{baseUrlApi}“. ./utils/api”
从“. ./跑龙套/请求”进口要求
出口默认{//登录
wxLogin:(数据)=比;
请求。邮报》('/store-miniApp-web/外部接口/微信/wxLogin”,数据,{baseURL: baseUrlApi}),//收藏
addCollect:(goodId、状态)=比;
request.get ('/store-miniApp-web/存储/会员/addCollect& # 63; goodId=$ {goodId},状态=${地位}’,
空,{
baseURL: baseUrlApi
}),
}
