微信小程序封裝request請求

使用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);
});