基于微信小程序的ajax拦截器(简易版的axios)
2018-01-16 17:02
573 查看
摘要: 微信小程序现在比较火,现在好的ajax请求框架都不能良好的支持,只能自己动手写一个,简易版的axios
3ff8
import util from './util.js' const request = (function () { //系统参数; let defaults = { timeout: 5000, reqState: false, url: '', header: '', data: '', method: '', dataType: 'json', success: (res) => { }, fail: (res) => { }, complete: function (res) { }, }; function xhrAdapter(config) { return new Promise(function dispatchXhrRequest(resolve, reject) { config.success = (res) => { resolve(res); }; config.fail = (res) => { reject(res); }; wx.request(config); }); } function dispatchRequest(config) { var adapter = new xhrAdapter(config); return adapter.then(function onAdapterResolution(response) { return response; }, function onAdapterRejection(reason) { return Promise.reject(reason); }); } function InterceptorManager() { this.handlers = []; } InterceptorManager.prototype.use = function use(fulfilled, rejected) { this.handlers.push({ fulfilled: fulfilled, rejected: rejected }); return this.handlers.length - 1; }; InterceptorManager.prototype.forEach = function forEach(fn) { util.forEach(this.handlers, function forEachHandler(h) { if (h !== null) { fn(h); } }); }; function Axios(defaultConfig) { this.defaults = defaultConfig; this.interceptors = { request: new InterceptorManager(), response: new InterceptorManager() }; }; util.forEach(['delete', 'get'], (method) => { Axios.prototype[method] = function (url, config) { return this.request(util.merge({ header: config || {} } || {}, { method: method, url: url })) } }) util.forEach(['post', 'put'], (method) => { Axios.prototype[method] = function (url, data, config) { return this.request(util.merge({ header: config ||{} } || {}, { method: method, url: url, data: data, })) } }) Axios.prototype.request = function request(config) { config.method = config.method.toLowerCase(); config = util.merge(defaults, this.defaults, config); var chain = [dispatchRequest, undefined]; var promise = Promise.resolve(config); this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) { chain.unshift(interceptor.fulfilled, interceptor.rejected); }); this.interceptors.response.forEach(function pushResponseInterceptors(interceptor) { chain.push(interceptor.fulfilled, interceptor.rejected); }); while (chain.length) { promise = promise.then(chain.shift(), chain.shift()); } return promise; } function createInstance(defaultConfig) { let context = new Axios(defaultConfig); return context; } let axios = createInstance(defaults); return axios; })(); // 自定义请求拦截器 request.interceptors.request.use((data) => { console.log(`url:${data.url} method:${data.method}`); wx.showLoading({ title: '加载中', }) return data; },error =>{ return Promise.reject(error); }); // 自定义返回拦截器 request.interceptors.response.use((data) => { wx.hideLoading(); return data }, error => { return Promise.reject(error); }) module.exports = request;
3ff8
相关文章推荐
- 微信小程序-路线规划,地图导航功能基于高德地图API
- 微信小程序开发(一)-简易教程
- 如何使用Python基于Pygame写一个简易的微信打飞机游戏。
- 微信小程序登录(基于java后台)
- 开发者实验室之------基于 Ubuntu 搭建微信小程序服务
- 微信跳一跳辅助程序开发,基于C++与opencv图像识别
- 基于C# Winform的简易聊天程序[第三篇-信息群发]
- 微信小程序完整精品demo:移动小商城:基于node,包含前后台
- 微信小程序 - 实战小案例 - 简易记事本
- 微信小程序----简易table表格
- 移动开发之【微信小程序】的原理与权限问题以及相关的简易教程
- 微信小程序简易教程
- 基于微信的微交易系统开发“小程序”初试牛刀
- 微信小程序入门学习-- 简易Demo:计算器
- 基于mpvue开发微信小程序(项目已开源)
- (开源)基于vue, react, node.js, go开发的微商城(含微信小程序)
- 微信小程序——智能小秘“遥知之”(语义理解基于olami,源码见原文链接,PC端打开)
- 微信小程序 textarea 简易解决方案
- 微信小程序开发记账应用实战服务端之用户注册与登录基于ThinkPHP5描述
- 基于微信小程序开发的demo