• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序封装request请求

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

使用TypeScript开发微信小程序(3):网络请求封装:https://www.jianshu.com/p/8ca56b840aa7

微信小程序封装request请求:https://www.jianshu.com/p/da32d38962e7

一、带请求拦截

request.ts

/**
 * http请求方法枚举
 */
declare type HttpMethod =
  | \'GET\'
  | \'OPTIONS\'
  | \'HEAD\'
  | \'POST\'
  | \'PUT\'
  | \'DELETE\'
  | \'TRACE\'
  | \'CONNECT\';

/**
 * http 请求封装
 */
interface HttpRequest {
  url: string;
  method?: HttpMethod;
  data?: any;
  token?: boolean;
}

/**
 * http请求回调
 */
interface HttpCallback {
  onSuccess: SuccessCallback;
  onServerError: ErrorCallback;
  onNetworkError: ErrorCallback;
}

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

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

/**
 * 请求错误
 */
interface HttpError {
  code: number;
  errMsg: string;
}

/**
 * http请求拦截器
 */
interface HttpInterceptor {
  handleResponse(statusCode: number, data: string | Object | ArrayBuffer, callback: HttpCallback);
}

/**
 * 默认的网络拦截器
 */
class DefaultHttpInterceptor implements HttpInterceptor {
  private readonly CODE_SUCCESS: number = 200;
  public constructor() {}

  handleResponse(statusCode: number, data: string | Object | ArrayBuffer, callback: HttpCallback) {
    // console.log(1);
    let error: ServerError;
    if (statusCode == this.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.onServerError = serverError;
    } else {
      this.onServerError = error => {
        console.error(error.errMsg);
      };
    }

    if (networkError) {
      this.onNetworkError = networkError;
    } else {
      this.onNetworkError = error => {
        console.error(error.errMsg);
      };
    }
  }
}

/**
 * 服务器返回错误,如401,500等
 */
class ServerError implements HttpError {
  private readonly ERROR_CODE_UNAUTH: number = 401;
  private readonly ERROR_CODE_SERVER_ERROR: number = 500;

  code: number;
  errMsg: string;
  callback: ErrorCallback;
  constructor(code: number, data: any, callback: { (error: HttpError): void }) {
    this.code = code;
    this.errMsg = data.msg;
    this.callback = callback;
  }

  /**
   * 网络请求错误处理
   * @param callback
   */
  processError() {
    console.error(\'error code: \' + this.code + \', error message: \' + this.errMsg);
    if (this.code == this.ERROR_CODE_UNAUTH) {
      // 处理401未认证错误
    } else if (this.code >= this.ERROR_CODE_SERVER_ERROR) {
      // 处理500服务器返回错误
    } else {
      // 处理未知错误
    }
  }
}

/**
 * 网络请求客户端
 */
class HttpClient {
  private static readonly host: string = \'http://127.0.0.1:8686\';
  private static instance: HttpClient;
  private DefaultInterceptor: HttpInterceptor;
  private constructor() {
    this.DefaultInterceptor = 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?: HttpInterceptor) {
    let method = request.method === undefined ? \'GET\' : request.method;
    wx.request({
      url: this.buildUrl(request.url),
      data: request.data,
      method: method,
      header: this.buildHeader(method, request.token),
      success: res => {
        console.log(res);
        if (interceptor) {
          interceptor.handleResponse(res.statusCode, res.data, callback);
        } else {
          this.DefaultInterceptor.handleResponse(res.statusCode, res.data, callback);
        }
      },
      fail: (err: HttpError) => {
        console.log(err);
        if (callback.onNetworkError) {
          callback.onNetworkError(err);
        }
      },
    });
  }

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

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

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

export const Api = HttpClient.getInstance();

页面中调用:

import { Api, DefaultCallback } from \'../../utils/request\';
Api.request({
    url: \'/api/login\',
    method: \'POST\',
    data: {
        password: \'ng201212\',
        username: \'nggaox\',
    },
}, new DefaultCallback(data = > {
    console.log(data);
}));

二、使用Promise封装

request.ts

const baseURL = \'http://127.0.0.1:8686/api/\';

const request = (url: string, params: { method?: string; data?: any; header?: object }) => {
  return new Promise(function (resolve, reject) {
    let header = {
      \'content-type\': \'application/json\',
    };
    wx.request({
      method: params.method === undefined ? \'GET\' : params.method,
      url: baseURL + url,
      data: params.data,
      header: Object.assign(header, params.header),
      success(res) {
        if (res.statusCode == 200) {
          //请求成功
          resolve(res);
        } else {
          //其他异常
          reject(res.data.msg);
        }
      },
      fail(err) {
        //请求失败
        reject(err.errMsg);
      },
    });
  });
};

export default request;

api.ts:

import request from \'../utils/request\';

export const getOpenidSessionKey = (data = {}) => request(\'getOpenidSessionKey\', data);

页面中调用:

import { getOpenidSessionKey } from \'./api\';

getOpenidSessionKey({
    data: {
        code: data.code,
    },
}).then(res = > {
    console.log(res);
});

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序-for循环遍历的使用发布时间:2022-07-18
下一篇:
微信小程序网络请求封装发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap