运用TS开发微信小程序(3):网络恳求封装

运用TS开发微信小程序(3):网络恳求封装

导言

结合事务需求和技能需求,现在运用TS开发小程序,之前现已发过了TypeScript开发微信小程序的环境建立。尽管现在也有许多第三方开发结构,可是大部分都是根据vue,有必定的学习本钱,考虑到技能团队的技能栈共同,所以运用TypeScript进行开发。

在运用前,由于习气使然自然是运用TS对一些常用操作进行封装,一起也当练手,今日先讲运用TypeScript对微信央求进行封装。

微信央求流程

wx.request({
url: 'www.jianshu.com',
method:'GET'
success(res) {
successCallback(res);
},
fail(fail) {
failCallback(fail);
}
});

能够看出来微信关于央求只给了失利和成功两种状况,每次都需求独自去处理,并且这个su标签14ccess和fail指的是http央求履行的成功失利,并不是咱们所等待的接口是否回来正确数据的事务上的成功失利,而咱们大多数情况下关于失利的处理都是共同的,并且央求参数许多时分咱们也是有固定的。那么接下来咱们对这个进行封装。运用TS开发微信小程序(3):网络央求封装

封装

触及技能点有:

单例链式调用TypeScript中interface的运用TypeScript中type关键字的运用

  1. 首要咱们把央求需求的东西独自拉出来,包含url,param,header,method,言语安排欠好,直接上代码吧。
/**
* http 央求封装
*/
interface HttpRequest {
api: string,
param: any,
needToken?: boolean,
method: HttpMethod
}
/**
* http央求办法枚举
*/
export enum HttpMethod {
GET,
POST
}
  1. 关于央求的成果运用阻拦器进行阻拦,在封装中对wx api中的success回来值进行预处理,并进行逻辑判别。
/**
* http央求阻拦器
*/
interface HttpInterceptor {
handleResponse(statusCode: n标签5umber, data: string | IAnyObject | ArrayBuffer, callback: HttpCallback)
}

阻拦后咱们需求去界说好咱们自己事务上的成功失利。

/**
* http央求回调
*/
interface HttpCallback {
/**
* 央求成功
*/
onSuccess: SuccessCallback
onServerError: ErrorCallback
onNetworkError: ErrorCallback
}

/**
*运用TS开发微信小程序(3):网络央求封装 央求过错
*/
interface HttpError {
code: number,
msg: string
}

/**
* 成功的callback
*/
type SuccessCallback = (data: string | IAnyObject | ArrayB运用TS开发微信小程序(3):网络央求封装uffer) => void;

/**
* 过错的callback
*/
type ErrorCallback = (error: HttpError) => void;

这样在接口界说上咱们就差不多界说好了,接下来就能够把这个网络央求客户端建立起来了。

  1. 在写HttpClient中咱们先预备好一些默许完成,比方阻拦器的默许完成和回调的默许处理,由于咱们实际上在一个项目中大部分的阻拦器逻辑和回调都是共同的。
/**
* 默许的网络阻拦器
*/
class DefaultHttpInterceptor implements HttpInterceptor {
private readonly CODE_SUCCESS: number = 200;

public constructor() {

}

handleResponse(statusCode: number, data: string | IAnyObject | ArrayBuffer, callback: HttpCallback) {

let error: ServerErr标签1or;
if (statusCode == this.CODE_SUCCESS) {
callback.onSucces运用TS开发微信小程序(3):网络央求封装s(data)
return
}

error = new ServerError(statusCode, data, callback.onServerError)
error.processError();
}
}
export class DefaultCallback implements HttpCallback {
onSuccess: SuccessCallback
onServerError: ErrorCallback
onNetworkError: ErrorCallback

constructor(success: SuccessCallback, serverError?: ErrorCallback, networkError?: ErrorCallback) {
this.onSuccess = success

if (serverError) {
this.onServerError = serverError
} else {
this.onServerError = (error) => {
console.log(error.msg)
}
}

if (networkError) {
this.onNetworkError = networkError
} else {
this.onNetworkError = (error) => {
console.log(error.msg)
}
}
}
}

/**
* 服务器回来过错,如401,500等
*/
class ServerError implements HttpError {

private readonly ERROR_CODE_UNAUTH: number = 401;
private readonly ERROR_CODE_SERVE标签10R_ERROR_BASE = 500;

code: number
msg: string
callback:标签19 ErrorCallback
constructor(code, msg, callback) {
this.code = code;
this.msg = msg;
this.callba运用TS开发微信小程序(3):网络央求封装ck = callback
}

/**
* 网络央求过错处理
* @param callback
*/
processError() {
console.error('get error on http request, error code: ' + this.code + ', error message: ' + this.msg)

if (this.code == this.ERROR_CODE_UNAUTH) {
this.processUnauthError()
} else if (this.code >= this.ERROR_CODE_SERVER_ERROR_BASE) {
this.processServerError()
} else {
this.processUnknownError()
}
}

/**
* 处理未认证过错
*/
processUnauthErro标签14r() {

}

/**
* 处理服务器回来过错
*/
processServerError() {

}

/**
* 处理不知道过错
*/
processUnknownError() {

}
}

  1. HttpClient
    这个客户端咱们用单例去完成,这样便于外部运用
/**
* 网络央求客户端
*/
class HttpClient {
private static readonly host: string = 'https://www.jianshu.com/'
private static instance: HttpClient;
private m_Interceptor: HttpInterceptor;
private constructor() {
this.m_Interceptor = new DefaultHttpInterceptor();
}

/**
* 单例
*/
public static getInstance(): HttpClient {
if (!this.instance) {
this.instance = new HttpClient();
}

return this.instance;
}

/**
* 网络央求办法
* @param request 网络央求元素
* @param callback 央求回调
* @param interceptor 自界说阻拦器
*/
public request(request: HttpRequest, callback: DefaultCallback, interceptor?: Http标签1Interceptor) {
wx.request({
url: this.buildUrl(request.api),
data: request.param,
method: request.method == HttpMethod.GET ? "GET" : "POST",
header: this.buildHeader(request.method, request.needToken),
success: (result) => {
// callback.onSuccess(result.data)
if (interceptor) {
interceptor.hand标签11leResponse(result.statusCode, result.data, callback)
} else {
this.m_Interceptor.handleResponse(result.statusCode, result.data, callback)
}
},
fail: (reason) => {
if (callback.onNetworkErr运用TS开发微信小程序(3):网络央求封装or) {
callback.onNetworkEr标签17ror(new NetworkError(0, reason.errMsg));
}
}
})
}

/**
* 构建header
* @param method
* @param needToken
*/
private buildHeader(method: HttpMethod, needToken = false): IAnyObject {
let contentType: string;
if (method == HttpMethod.GET) {
contentType = ''
} else {
contentType = ''
}

return {
contentType: contentType,
token: needToken ? 'token' : ''
}
}

/**
* 构建url
* @param api
*/
private buildUrl(api: string): string {
return HttpClient.host + api;
}
}

export const ApiClient = HttpClient.getInstance();

写好后,咱们在外部运用只需求如下处理

 // 网络央求写法1
ApiClient.request({
api: '/test',
method: HttpMethod.GET,
param: null
}, new Defaul运用TS开发微信小程序(3):网络央求封装tCallback((data) => { console.log(data) }))

是不是很便利?

  1. 当咱们有不一样的处理需求时,能够自己去完成接口并传入即可。

语文欠好,请各位见谅,欢迎谈论沟通!

Tags:

Add a Comment

电子邮件地址不会被公开。 必填项已用 *标注