0.2.13 • Published 10 months ago

@qlin/request v0.2.13

Weekly downloads
-
License
ISC
Repository
github
Last release
10 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

10 months ago

0.2.12

10 months ago

0.2.11

10 months ago

0.2.10

10 months ago

0.2.9

10 months ago

0.2.8

12 months ago

0.2.7

12 months ago

0.2.6

1 year 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

2 years ago

0.1.12

2 years ago

0.1.13

2 years 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