New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →

venus-fetch

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

venus-fetch

easy to use fetch lib

1.1.17
latest
Source
npm

Version published: 5 years ago

Maintainers: 2

Created: 6 years ago

Source

vFetch

安装

npm install venus-fetch

使用

import VFetch from 'venus-fetch'

const http = VFetch(opt)

初始化配置

const httpConfig = {
  conf: {
    credentials: 'include',
    baseUrl: '/api',
    headers: {
      Accept: 'application/json',
      // 'Content-Type': 'application/json',
    },
  },
  before: [
    ([url, opt]) => {
      console.log('hook1', url, opt)
    },
    ([url, opt]) => {
      console.log('hook2', url, opt)
    },
  ],
  after: [
    (rsp) => {
      console.log('after hook1', rsp)
    },
  ],
  timeout: 5000,
}

配置	说明	默认值	其它
allow	client 允许的请求类型	['get', 'post', 'put', 'delete', 'option']	可选
before	前置钩子(钩子数组)	[]	可选
after	后置钩子(钩子数组)	[]	可选
conf	fetch配置项		参考fetch api 文档
error	全局错误处理函数	null	可选

方法

get(url, [parmas], [options]) // 基于初始化配置的 allow
post(url, [parmas], [options]) // 基于初始化配置的 allow
put(url, [parmas], [options]) // 基于初始化配置的 allow
delete(url, [parmas], [options]) // 基于初始化配置的 allow
option(url, [parmas], [options]) // 基于初始化配置的 allow
setErrorHook(func) 设置全局错误处理器
injectBefore(func) 增加前置拦截器
injectAfter(func) 增加后置拦截器

具体请求方法中携带的options中提供了type字段，可选 [download/upload],分别对应了上传文件和下载文件流的操作,type:upload时，将会把请求头中的Content-Type设置为undefined；type:download时，将会把response进行response.blob()操作

内置error code

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

injectAfter function

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

例子

http.injectAfter(function(rsp){
  // do some response check

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

Content-Type

为了方便使用，下面这几种情况下vFetch会根据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实例的构造函数为 vFetch.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/vFetch.js"></script>
</head>
<body>
  <script>
    console.log(window, VFetch.HttpError, VFetch.HTTP_ERROR_MAP, VFetch.httpConfig)
    const http = VFetch(VFetch.httpConfig)

    http.injectAfter(function(rst){
      console.log('injectAfter', rst)
      return new vFetch.HttpError({
        code: '001',
        message: 'error test',
        httpStatus: null,
      })
    })
    http.injectAfter(function(){
      console.log(222);
    })
    http.setErrorHook(function(e){
      console.log(e, 'error');
    })

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

Keywords

FAQs

What is venus-fetch?

Is venus-fetch well maintained?

Package last updated on 13 Dec 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install