0.2.13 • Published 9 months ago

@qlin/request v0.2.13

Weekly downloads
-
License
ISC
Repository
github
Last release
9 months ago

fetch 常用功能封装

内置提供的能力

  • timeout 请求超时
  • baseURL 默认 URL
  • requestInterceptor 请求拦截器
  • responseInterceptor 响应拦截器
  • transformData 响应数据转换(注意需要兼容各种数据类型)
  • 请求取消
  • 重复请求拦截
  • 请求 merge
  • 请求 cacheData

目前触发了超时依旧会忘后端发送请求不会自动进行 abort

配置

const config = {
  // `baseURL` will be prepended to `url` unless `url` is absolute.
  // It can be convenient to set `baseURL` for an instance of axios to pass relative URLs
  // to methods of that instance.
  baseURL: '',
  timeout: 10000, // 默认 10s
  method: 'POST', // 默认 post
  mergeRequest: false, // 是否合并请求
  responseType: null, // 可选 'json' | 'text' | 'blob' | 'arrayBuffer' | 'formData',默认根据 content-type 处理
  credentials: 'include', // 默认 include, 'include' | 'same-origin' | 'omit'
  headers: {}, // 传给服务器的 header
  cacheData: false, // 是否缓存
  requestInterceptor: (config: Config) => Config || [],
  responseInterceptor: (response: RequestResponse) => RequestResponse || [],
  transformData: (data) => {
    if (isPlainObject(data))
      return data

    return data
  },
  errorHandler: (err) => {
    console.log(err)
  }
}

用法

const request = createRequest({
    timeout: 10000,
    baseURL: 'http://localhost'
});

错误处理

function errorHandler(error) {
    // request 内部逻辑异常 | transform 抛出的异常 | 超时异常
    if (error.msg) {
        console.log(msg);
    } else if (error.response) {
        // 请求成功发出且服务器也响应了状态码,但状态代码超出了 2xx 的范围
        console.log(error.response.status);
        console.log(error.response.headers);
    } else {
        // 未知异常
        console.error(error)
    }
    console.log(error.config);
}

一些常用场景 demo

请求 merge

假设有一个请求还没回来,就发起同一个请求(一次 or 多次), 后续请求会直接延用前一个请求的结果,不管成功还是失败。

let response1;
request('/url/merge', null, {
    mergeRequest: true
}).then((response) => {
    response1 = response;
    console.log('process response: ' + response);
})
request('/url/merge', null, {
    mergeRequest: true
}).then((response) => {
    // 'is pre response: true
    console.log('is pre response: ', response1 === response);
})

请求 cacheData

配置,若 cacheData 传 true,则默认使用 ram 缓存类型,缓存时间 3min

{
    cacheType: 'ram', // ram: 内存,session: sessionStorage,local:localStorage
    cacheTime: 1000 * 60 * 3, // 缓存时间:默认3min
}
request('/url/cache', null, {
    cacheData: true
}).then((response) => {
    console.log('process response: ' + response);
})

请求 abort

const controller = new AbortController();
request('/url/abort', null, {
    signal: controller.signal
}).then((response) => {
    console.log('process response: ' + response);
})
// cancel the request
controller.abort()

后续计划

  1. 支持配置中间件
0.2.13

9 months ago

0.2.12

9 months ago

0.2.11

9 months ago

0.2.10

9 months ago

0.2.9

9 months ago

0.2.8

10 months ago

0.2.7

11 months ago

0.2.6

12 months ago

0.2.5

1 year ago

0.2.4

1 year ago

0.2.3

1 year ago

0.2.2

1 year ago

0.2.1

1 year ago

0.2.0

1 year ago

0.1.17

1 year ago

0.1.16

1 year ago

0.1.14

1 year ago

0.1.12

1 year ago

0.1.13

1 year ago

0.1.10

2 years ago

0.1.11

2 years ago

0.1.8

2 years ago

0.1.7

2 years ago

0.1.9

2 years ago

0.1.6

2 years ago

0.1.5

2 years ago

0.1.4

2 years ago

0.1.3

2 years ago

0.1.2

2 years ago

0.1.1

2 years ago

0.1.0

2 years ago