vsco-贝博手机登录-贝博手机app

导言

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

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

微信恳求流程

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

能够看出来微信关于恳求只给了失利和成功两种状况,每次都需求独自去处理,并且这个success和fail指的是http恳求履行的成功失利,并不是咱们所等待的接口是否回来正确数据的事务上的成功失利,而咱们大多数情况下关于失利的处理都是共同的,并且恳求参数许多时分咱们也是有固定的。那么接下来咱们对这个进行封装。

封装

触及技能点有:

单例链式调用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 {
标签17handleResponse(statusCode: number, data: string | IAnyObject | ArrayBuffer, callback: HttpCallback)
}

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

/**
* http恳求回调
*/
interface HttpCallback {
/**
* 恳求成功
*/
onSuccess: SuccessCallback
onServerError: ErrorCallback
onNetworkError: Er标签17rorCallback
}

/**
* 恳求过错
*/
interface HttpError {
code: number,
msg: string
}

/**
* 成功的callback
*/
type SuccessCallback = (data: string | IAnyObject | ArrayBuffer) => void;

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

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

  1. 在写HttpClient中咱们先预备好一些默许完成,比方阻拦器的默许完成和回调的默许处理,由于咱们实际上在一个项目中大部分的阻拦器逻辑和回调都标签5是共同的。
/**
* 默许的网络阻拦器
*/
class DefaultHttpInterceptor implements HttpInterceptor {
private revsco-贝博手机登录-贝博手机appadonly CODE_SUC标签14CESS: number = 200;

public constructor() {

}

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

let error: ServerError;
if (statusCode == th标签17is.CODE_SUCCESS) {
callback.onSuccess(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.onServerEr标签17ror = 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 S标签20erverError implements HttpError {

privavsco-贝博手机登录-贝博手机appte readonly ERROR_CODE_UNAUTH: number = 401;
private readonly ERROR_CODE_SERVER_ERROR_BASE = 500;

code: number
msg: string
callback: ErrorCallback
constructor(code, msg, callback) {
this.code = code;
this.msg = msg;
this.callback = callb标签17ack
}

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

if (this.code vsco-贝博手机登录-贝博手机app== this.ERROR_CODE_UNAUTH) {
this.processUnauthError()
} else if (this.code >= this.ERROR_CODE_SERVER_ERROR_BASE) {
标签11this.processServerError()
} elvsco-贝博手机登录-贝博手机appse {
thi标签1s.processUnknownError()
}
}

/**
* 处理未认证过错
*/
processUnauthError() {

}

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

}

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

}
}

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

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

return this.i标签17nstance;
}

/**
* 网络恳求办法
* @param request 网络恳求元素
* @param callback 恳求回调
* @param interceptor 自界说阻拦器
*/
public request(request: HttpRequest, callback: DefaultCallback, 标签19interceptor?: HttpInterceptor) {
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) => {
// callvsco-贝博手机登录-贝博手机appback.onSuccess(result.data)
if (interceptor) {
interceptor.handleResponse(result.statusCode, result.data, callback)
} else {
this.m_Interceptor.handleResponse(result.statusCode, result.data, callback)
}
},
fail: (reason) => {
if (callback.onNetworkError) {
callback.onNetworkError(new NetworkError(0, reason.errMsg));
}
}
})
}

/**
* 构建heade标签14r
* @param method
* @param needToken
*/
private buildHeader(method: HttpMethod, needToken = false): IAnyObject {
let contentType: string;
if (vsco-贝博手机登录-贝博手机appmethod == HttpMethod.GET) {
contentType = ''
} else {
contentType = ''
}

return {
contentType: contentType,
token: needToken ? '标签17token' : ''
}
}

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

export const ApiClient = HttpClient.getInstance();

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

 // 网络恳求写法1
ApiClient.reques标签19t({
api: '/test',
method: HttpMethod.GET,
param: null
}, new DefaultCallbac标签20k((data) => { console.log(data) }))

是不是很便利?

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

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

Write a Comment

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