天津网站制作软件,营销型公司官网建设,下载爱南宁app下载,如何做自己个人网站uniapp请求接口封装
在uniapp发送请求跟web的不同#xff0c;而且通过uni.request这个方法进行调用。
示例#xff1a;
uni.request({url: https://www.example.com/request, //仅为示例#xff0c;并非真实接口地址。data: {text: uni.request},header: {custom-header:…uniapp请求接口封装
在uniapp发送请求跟web的不同而且通过uni.request这个方法进行调用。
示例
uni.request({url: https://www.example.com/request, //仅为示例并非真实接口地址。data: {text: uni.request},header: {custom-header: hello //自定义请求头信息},success: (res) {console.log(res.data);this.text request success;}
});可能对于习惯了使用axios的开发者而言会不太喜欢使用这种方式。因此文章讲介绍一下怎么在uniapp上实现一个类似axios的请求方式。
定义构造函数
在这里命名为UniAxios
class UniAxios {constructor(options {}) {this.defaults options;this.interceptors {request: new InterceptorManager(),response: new InterceptorManager(),};}
}在UniAxios构造函数里创建了两个拦截器管理实例。
同时添加了拦截器处理
拦截器
拦截器管理机制其实很简单。就只有一个handlers属性用于保存拦截器及三个原型方法添加、移除、执行
class InterceptorManager {constructor() {this.handlers [];}
}InterceptorManager.prototype.use function use(fulfilled, rejected, options) {this.handlers.push({fulfilled: fulfilled,rejected: rejected,// 默认异步synchronous: options ? options.synchronous : false});// 当前拦截器idreturn this.handlers.length - 1;
};InterceptorManager.prototype.remove function remove(id) {if (this.handlers[id]) {// 只移除拦截器引用不处理数组否则会影响之前的拦截器索引this.handlers[id] null;}
};InterceptorManager.prototype.forEach function forEach(fn) {this.handlers.forEach((handler) {if (handler ! null) {fn(handler);}});
};处理不同平台请求method
对于不同平台可能支持的method不一致因此这里也需要进行处理。
因为不同的请求方式在uni.request中只是method字段的不同完全可以单独把uni.request封装好通过传递method来实现不同的请求方法。
以微信小程序为例
// 微信小程序支持的请求方法
const supportedMethodType [GET,POST,PUT,DELETE,CONNECT,HEAD,OPTIONS,TRACE,
];// 通过遍历的方式添加到构造函数的原型上
supportedMethodType.forEach((item) {LeoAxios.prototype[item.toLocaleLowerCase()] function(url, data, header, ...args) {return this.request(item.toLocaleLowerCase(),url,data, {...this.defaults.header,...header,},...args);};
});上面添加的这些原型方法内部其实都是调用了同一个request方法。
请求发送
在request方法中需要合并上面的不同请求传过来的参数以及初始化UniAxios时的配置。
同时处理拦截器将拦截器组装成一个数组用于Promise.then的链式调用。
function processArguments(args) {if (args.length 1) {return {method: args[0],url: args[1],data: args[2],header: args[3],rest: args.length 4 ? args.slice(3) : undefined,};}return args;
}function mergeConfig(defaults, config) {return Object.assign(defaults, config);
}LeoAxios.prototype.request function request() {let config {};// 兼容传参config processArguments(arguments);// 合并配置config mergeConfig(JSON.parse(JSON.stringify(this.defaults)), config);// 请求拦截器栈const requestInterceptorChain [];// 拦截器是否是同步的let synchronousRequestInterceptors true;this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) {synchronousRequestInterceptors synchronousRequestInterceptors interceptor.synchronous;// 将处理方法推进栈中采用unshift方法requestInterceptorChain.unshift(interceptor.fulfilled,interceptor.rejected);});// 响应拦截器栈const responseInterceptorChain [];this.interceptors.response.forEach(function pushResponseInterceptors(interceptor) {responseInterceptorChain.push(interceptor.fulfilled, interceptor.rejected);});let promise;// 异步的处理if (!synchronousRequestInterceptors) {// 请求方法let chain [dispatchEvent, undefined];// 在请求方法前添加请求拦截器Array.prototype.unshift.apply(chain, requestInterceptorChain);// 在请求方法后添加响应拦截器chain chain.concat(responseInterceptorChain);promise Promise.resolve(config);while (chain.length) {promise promise.then(chain.shift(), chain.shift());}return promise;}// 请求拦截器while (requestInterceptorChain.length) {const onFulfilled requestInterceptorChain.shift();const onRejected requestInterceptorChain.shift();try {newConfig onFulfilled(config);} catch (err) {onRejected(err);break;}}// 发送请求try {promise dispatchEvent(config);} catch (err) {return Promise.reject(err);}while (responseInterceptorChain.length) {promise promise.then(responseInterceptorChain.shift(),responseInterceptorChain.shift());}return promise;
};dispatchEvent方法就是用于发送请求。
function dispatchEvent(config) {let timer,requestTask,// overtime 请求是否超时overtime false;// timer 检测超时定时器requestTask 网络请求 task 对象aborted 请求是否已被取消abort 取消请求方法return new Promise((resolve, reject) {if (config.cancel) {return reject({requestConfig: config,errMsg: 网络请求失败主动取消});}requestTask uni.request({url: config.url[0] / ? config.baseUrl config.url : url,data: config.data,method: config.method,header: config.header,...config.rest,success: async function success(res) {res.requestConfig config;if(config.statusCode config.statusCode.indexOf(res.statusCode) -1) {reject(res);} else {resolve(res);}},fail: async function fail(err) {if (overtime) {return;}reject({...err,requestConfig: config});},complete: function complete() {// 清除超时定时器clearTimeout(timer);},});timer setTimeout(async () {// 会触发fail方法overtime true;requestTask.abort();reject({requestConfig: config,errMsg: 网络请求时间超时});}, config.timeout);})
}在这个方法中还添加了超时处理在超时后调用requestTask.abort方法。
使用
来看看具体怎么使用
首先初始化一个实例
const request new LeoAxios({baseUrl: http://localhost:8081/,timeout: 60000,header: {Content-Type: application/json,},statusCode: [200, 304, 401]
});传入一些基础配置。
之后就可以使用request.post、request.get这些方法了。
request.get(/test, {}, {Content-Type: application/x-www-form-urlencoded
});request.post(/testpost, {key: 1, value: 2});拦截器的使用
拦截器有几点需要注意的是
在fulfilled方法中需要返回传入的参数保证下一个拦截器中能获取到传参在rejected方法中需要返回一个Promise.reject这样才能保证在其他拦截器触发的都是rejected
request.interceptors.request.use(function fulfilled(options) {return options;},function rejected(err) {return Promise.reject(err);},option: {synchronous: false}
);
