Tfetch NPM | npm.io

tFetch

安装

npm install tfetch

使用

import tFetch from 'tfetch'

const http = new tFetch(opt)

配置

配置	说明	默认值	其它
before	后置钩子(钩子数组)		可选
after	前置钩子(钩子数组)		可选
baseUrl	请求地址前缀	'/'
timeout	超时	1000
errorCodeKey	错误代码字段名		可选，启用token失效拦截时使用
tokenExpireCode	token校验失败时的errorcode		可选，启用token失效拦截时使用
reponseFormater	response stream 处理方法	json	arrayBuffer\blob\formData\json\text
conf	fetch配置项		参考fetch api 文档
errorHandler	全局错误处理函数		可选

方法

get(url, parmas, options)
post(url, parmas, options)
put(url, parmas, options)
delete(url, parmas, options)
option(url, parmas, options)
onError(func) 设置全局错误处理器
injectBefore(func) 增加前置拦截器
injectAfter(func) 增加后置拦截器

内置error code

HTTP_STATUS_ERROR - 服务器未正常响应
REQUEST_TIMEOUT - 请求超时
TOKEN_EXPIRE - token校验失败
RESPONSE_PARSING_FAILED - reponse 解析出错

injectAfter function

如果injectAfter function有返回值且返回值是HttpError的实例的话，当前请求的promise会被reject，这次请求的失败信息将也会触发onError事件。

!!! 注意，inject function接受的参数是一个reponse实例。如需触发onError事件，因为response对象的解析方法均为异步，所以inject function必须返回一个promise

例子

http.injectAfter(async function(response){
  const rsp = await response.json()
  // do some response check

  return new tFetch.HttpError({
    code: '001',
    message: 'error test',
    httpStatus: null,
  })
})

Content-Type

为了方便使用，下面这几种情况下tFetch会根据content-type去自动设置request body的类型，处理body对象的构建

application/x-www-form-urlencoded (默认) 如果传入的params是object类型，则自动构建请求body
multipart/form-data 自动根据请求的parmas object 构建 FromData对象
application/json 如果传入的params是object类型，则自动转换成JsonString，如果为string类型，则直接用传入的params

请求的params为FormData类型时，request的body不会进行自动转换

httpError

构造函数

httpError实例的构造函数为 tFetch.HttpError

示例

{
  code: "TOKEN_EXPIRE"
  httpStatus: 401
  message: "用户认证失败"
}

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="../dist/tFetch.js"></script>
</head>
<body>
  <script>
    const http = new tFetch({
      baseUrl: './',
      errorCodeKey: 'errorCode',
      tokenExpireCode: '101-003'
    })

    http.get('t.json', {a:2, c:3}, {timeout: 100})
      .then(rst => {
        console.log(rst, 'success');
      }).catch(e => {
        console.log(e, 'error');
      })
  </script> 
</body>
</html>

fetch ajax

babel-cli babel-preset-es2015 babel-preset-stage-2 uglify-js

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago