1.0.0-alpha.3 • Published 3 years ago

@winner-fed/business-request v1.0.0-alpha.3

Weekly downloads
1
License
MIT
Repository
github
Last release
3 years ago

business-request

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

安装

npm install --save @winner-fed/business-request

快速上手

基础参数配置

import {createRequest} from '@winner-fed/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 为对象或者数组时, 会根据 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), 做 ResponseresponseType 解析 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) { / 异常处理 / }, }

}

 ## 其他方法
 ```typescript
    // 设置通用URL
    setBaseURL(baseURL: string): void
   // 设置通用 Header
    setHeader(headers: any): void

TODO

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