微信小程序 使用 fly接口请求框架


fly简介

微信小程序的 javascript运行环境和浏览器不同,页面的脚本逻辑是在JsCore中运行,JsCore是一个没有窗口对象的环境,所以不能在脚本中使用window,也无法在脚本中操作组件,JsCore中也没有 XmlhttpRequest对象,所以jquery 、zepto、axios这些在小程序中都不能用,而此时,正是 fly 大显身手的时候。

详细API,移步官方文档: flyio帮助文档.

使用步骤

    从官网下载wx.umd.min.js或者wx.js文件,保存在项目中。不建议使用cdn链接,防止链接失效。wx.js中有适配小程序请求的方法,有兴趣的可以自己研读,官网也有详细介绍。
    封装一个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来支持不同的环境,至于其它的环境,我们完全可以一样实现~~~

ヾ(◍°∇°◍)ノ゙~

原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

微信小程序 使用 fly接口请求框架

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » 微信小程序 使用 fly接口请求框架
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏