一个支持所有JavaScript运行环境的基于Promise的、支持请求转发、强大的http请求库。可以让您在多个端上尽可能大限度的实现代码复用。
Fly.js 是一个基于 promise 的,轻量且强大的Javascript http 网络库,它有如下特点:
- 提供统一的 Promise API。
- 浏览器环境下,轻量且非常轻量 。
- 支持多种JavaScript 运行环境
- 支持请求/响应拦截器。
- 自动转换 JSON 数据。
- 支持切换底层 Http Engine,可轻松适配各种运行环境。
- 浏览器端支持全局Ajax拦截 。
- H5页面内嵌到原生 APP 中时,支持将 http 请求转发到 Native。支持直接请求图片。
来自官方文档: Flyio文档
配置
首先安装flyio
,通过命令:
npm install flyio
在mpvue
中引入,在项目build -> webpack.base.conf.js
文件添加如下:
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue': 'mpvue',
'@': resolve('src'),
flyio: "flyio/dist/npm/wx" <---------- 添加这个路径,用flyio作为别名。
},
symlinks: false,
aliasFields: ['mpvue', 'weapp', 'browser'],
mainFields: ['browser', 'module', 'main']
},
之后再使用flyio
就不需要写那个又臭又长的路径,直接使用flyio
代替。
例如在request.js
中:
import Fly from 'flyio' // 引入flyio
const fly = new Fly()
请求配置
请求配置可以通过fly
中的config
来设置,例如一些通用配置如下:
// 配置基础项
fly.config.timeout = 10000 // 超时
fly.config.baseURL = global.BASEURL // 基地址,配置在一个文件中。
fly.config.params = {} // 设置公共参数
fly.config.headers = {'Content-Type': 'application/json'} // 公共请求头
请求拦截器
Fly支持请求/响应拦截器,可以通过它在请求发起之前和收到响应数据之后做一些预处理。
const urlWhitelist = ['/token']
// 请求拦截器
fly.interceptors.request.use((request)=>{
// 对请求进行处理,例如:
// 自定义请求header
// 添加请求白名单等
if (urlWhitelist.includes(request.url)) {
// 是否在白名单中
}
//打印出请求体
console.log(request.body)
//终止请求
//var err=new Error("xxx")
//err.request=request
//return Promise.reject(new Error(""))
//可以显式返回request, 也可以不返回,没有返回值时拦截器中默认返回request
return request;
})
响应拦截器
//添加响应拦截器,响应拦截器会在then/catch处理之前执行
fly.interceptors.response.use(
(response) => {
//只将请求结果的data字段返回
// 对数据进行处理,例如:可以根据错误码判断是否重新发起请求等。
return response.data
},
(err) => {
//发生网络错误后会走到这里
//return Promise.resolve("ssss")
}
)