@winner-fed/business-request

business-request

网络请求库，基于 axios 封装，旨在提供一个统一的 api 调用方式, 简化使用。

安装

npm install --save @liwb/business-request

快速上手

基础参数配置

import {createRequest} from '@liwb/business-request';

const api = createRequest({
    baseURL: 'https://api.github.com/',
    timeout: 3000
)};

GET 请求

api
  .get('/users/octocat?_t=' + Date.now())
  .then(function(response) {
    console.log(response);
  })
  .catch(function(error) {
    console.log(error);
  });

 // 也可将 URL 的参数放到 options.params 里
 api
   .get('/users/octocat', {
     params: {
       _t: Date.now(),
     },
   })
   .then(function(response) {
     console.log(response);
   })
   .catch(function(error) {
     console.log(error);
   });

POST 请求

api
  .post('/users/octocat', {
      name: 'Mike',
  })
  .then(function(response) {
    console.log(response);
  })
  .catch(function(error) {
    console.log(error);
  });

business-request API

request(url[, options])

api.request('/api/v1/xxx', {
  method: 'get',
  params: { id: 1 },
})
  .then(function(response) {
    console.log(response);
  })
  .catch(function(error) {
    console.log(error);
  });

request('/api/v1/user', {
  method: 'post',
  data: {
    name: 'Mike',
  },
})
  .then(function(response) {
    console.log(response);
  })
  .catch(function(error) {
    console.log(error);
  });

请求方法的别名

为了方便起见，为所有支持的请求方法提供了别名, method 属性不必在配置中指定 api.request(url[, CreateAxiosOptions]) api.get(url[, CreateAxiosOptions]) api.post(url[, data[, CreateAxiosOptions]) api.delete(url[, data[, CreateAxiosOptions]) api.put(url[, data[, CreateAxiosOptions])

interface CreateAxiosOptions extends AxiosRequestConfig {
  // 前缀，统一设置 url 前缀
  // 接口地址中的 path 部分
  // ( e.g. request('/user/save', { prefix: '/api/v1' }) => request('/api/v1/user/save') )
  prefix?: string;
  // 后缀，统一设置 url 后缀
  // ( e.g. request('/api/v1/user/save', { suffix: '.json'}) => request('/api/v1/user/save.json') )
  suffix?: string;
  // post类型, 用来简化写content-Type, 默认json
  requestType?: string;
  transform?: AxiosTransform;
  // 请求参数拼接到url
  joinParamsToUrl?: boolean;
  //  是否处理请求
  isTransformRequestResult?: boolean;
  // 是否对 response 做处理简化
  // 是否对请求返回的 Response 对象做格式、状态码解析
  isTransformResponseResult?: boolean;
  // 是否打印日志
  isDebug?: boolean
}

abstract class AxiosTransform {
  /**
   * @description: 请求成功处理
   */
  transformResponseData?: (res: AxiosResponse, config: CreateAxiosOptions) => any;

  /**
   * @description: 请求之前的拦截器
   */
  requestInterceptors?: (config: CreateAxiosOptions) => CreateAxiosOptions;

  /**
   * @description: 请求之前的拦截器错误处理
   */
  requestInterceptorsCatch?: (error: Error) => void;

  /**
   * @description: 响应的拦截器
   */
  responseInterceptors?: (res: AxiosResponse) => AxiosResponse;

  /**
   * @description: 响应的拦截器错误处理
   */
  responseInterceptorsCatch?: (error: Error) => void;

  /**
   * @description: 请求失败处理
   */
  errorHandler?: (e: Error) => Promise<any>;
}

请求参数配置

axios 其他请求配置参数详见，https://github.com/axios/axios#request-config

{
  // 'method' 是创建请求时使用的方法
  method: 'get', // default

  // 'params' 是即将于请求一起发送的 URL 参数，参数会自动 encode 后添加到 URL 中
  // 类型需为 Object 对象或者 URLSearchParams 对象
  params: { id: 1 },

  // 'data' 作为请求主体被发送的数据
  // 适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
  // 必须是以下类型之一：
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - 浏览器专属：FormData, File, Blob
  // - Node 专属： Stream
  data: { name: 'Mike' },

  // 'headers' 请求头
  headers: { 'Content-Type': 'application/json' },

  // 'timeout' 指定请求超时的毫秒数（0 表示无超时时间）
  // 如果请求超过了 'timeout' 时间，请求将被中断并抛出请求异常
  timeout: 25000,

  // ----------------业务封装，自定义请求参数
  // ’prefix‘ 前缀，统一设置 url 前缀
  // ( e.g. request('/user/save', { prefix: '/api/v1' }) => request('/api/v1/user/save') )
  prefix: '',

  // ’suffix‘ 后缀，统一设置 url 后缀
  // ( e.g. request('/api/v1/user/save', { suffix: '.json'}) => request('/api/v1/user/save.json') )
  suffix: '',

  // 'requestType' 当 data 为对象或者数组时， umi-request 会根据 requestType 动态添加 headers 和设置 body（可传入 headers 覆盖 Accept 和 Content-Type 头部属性）:
  // 1. requestType === 'json' 时, (默认为 json )
  // options.headers = {
  //   Accept: 'application/json',
  //   'Content-Type': 'application/json;charset=UTF-8',
  //   ...options.headers,
  // }
  // options.body = JSON.stringify(data)
  // 2. requestType === 'form' 时，
  // options.headers = {
  //   Accept: 'application/json',
  //   'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
  //   ...options.headers,
  // };
  // options.body = query-string.stringify(data);
  // 3. 其他 requestType
  // options.headers = {
  //   Accept: 'application/json',
  //   ...options.headers,
  // };
  // options.body = data;
  requestType: 'json', // default

  // ’isTransformResponseResult‘ 是否对请求返回的 Response 对象做格式、状态码解析
  isTransformResponseResult: true, // default

  // 是否打印请求及相应日志
  isDebug: true,

  // 'responseType': 如何解析返回的数据，当 parseResponse 值为 false 时该参数无效
  // 默认为 'json', 对返回结果进行 Response.text().then( d => JSON.parse(d) ) 解析
  // 其他(text, blob, arrayBuffer, formData), 做 Response[responseType]() 解析
  responseType: 'json', // default

  // 请求数据处理及相应数据处理
  transform: {
    // 相应数据处理
    transformResponseData (res: AxiosResponse, config: CreateAxiosOptions) => void
    // 请求之前的拦截器
    requestInterceptors (config: CreateAxiosOptions) => CreateAxiosOptions;
    // 请求之前的拦截器错误处理
    requestInterceptorsCatch?: (error: Error) => void;
    // 响应的拦截器
    responseInterceptors?: (res: AxiosResponse) => AxiosResponse;
    // 响应的拦截器错误处理
    responseInterceptorsCatch?: (error: Error) => void;
     // 'errorHandler' 统一的异常处理，供开发者对请求发生的异常做统一处理，详细使用请参考下方的错误处理文档
     // 错误处理在应用中一般分三层：系统层异常处理、通用业务异常处理、特殊异常错误处理，umi-request 提供的 errorHandler 会在请求初始化（参数异常）、请求过程（超时）、请求响应（状态码非 200）等情况下触发执行，处理的是系统层异常情况，现在更多情况是后端会在触发异常时返回 200 的响应并将异常码放到响应中去，前端同学通过异常码来区分是哪类异常，这种情况可以通过解析响应对象，通过 throw error 来触发 errorHandler 做统一异常处理。
    errorHandler?: (error) { /* 异常处理 */ },
  }

}

其他方法

   // 设置通用URL
   setBaseURL(baseURL: string): void
  // 设置通用 Header
   setHeader(headers: any): void

TODO

• 支持公共参数配置，如data，也支持具体请求参数覆盖
• 请求数据拦截（扩展性），响应数据拦截