Fetch

Fetch请求库封装

概要：

根据现有逻辑，重构fetch模块

1. npm统一维护，抽离所有子应用；
2. 逻辑梳理，结构调整、内置拦截器；
3. 完整url请求校验；
4. 内置响应拦截除401跳转登录地址之外，其余情况Promise对象结果返回；

实例化后提供的 函数钩子 ：

• start 请求唯一入口，返回请求Promise对象
• setRequestBefore 经过fetch处理后请求前的回调函数，回调参数为请求参数config（自定义拦截器后失效）
• setApiConfig 设置请求配置 [url, method]
• setNoNeedPrompt 设置code非200，不需要message提示接口msg字段的url数组（全匹配校验）

vh-fetch提供与axios保持一致的用法及api

• 实例化时的初始化config配置
• 默认设置，如defaults.timeout、defaults.baseURL等
• request
• get
• post
• delete
• head
• put
• patch
• all并发请求
• interceptors.request.use() 设置请求拦截器
• interceptors.response.use() 设置响应拦截器
• interceptors.request.eject() 取消请求拦截器
• interceptors.response.eject() 取消响应拦截器

使用

npm 安装 ：

npm i vh-fetch

引入使用：

import Fetch from 'vh-fetch'
const fetch = new Fetch([config])

设置api配置 ：

const MAP = {
    test: ['URL', 'POST']
}
fetch.setApiConfig(MAP)

设置需要拦截过滤的api地址 ：

const noNeedPrompt = [
     '/console/cut/get-vod-info',
]
fetch.setNoNeedPrompt(noNeedPrompt)

请求入口：

fetch.start(api, data, headers)

完整案例：

附：远期优化方案

• 前后端接口相互调整，响应拦截中msg提示条件的优化，目前前端维护成本较高、提取后新人了解比较难。