uni-app的网络请求API
- 接口能力(JS API)靠近微信小程序规范,但需将前缀
wx
替换为uni
,详见uni-app接口规范
网络请求
uni-app封装了发起网络请求以及拦截器的API :
发起请求: uni.request(OBJECT)
详情
拦截器: uni.addInterceptor(STRING, OBJECT)
Flyio
Fly.js 一个基于Promise的、强大的、支持多种JavaScript运行时的http请求库
它在浏览器、微信小程序、Weex、Node、React Native、快应用中都能正常运行
特点:
- 提供统一的 Promise API。
- 浏览器环境下,轻量且非常轻量。
- 支持多种JavaScript 运行环境
- 支持请求/响应拦截器。
- 自动转换 JSON 数据。
- 支持切换底层 Http Engine,可轻松适配各种运行环境。
- 浏览器端支持全局Ajax拦截 。
- H5页面内嵌到原生 APP 中时,支持将 http 请求转发到 Native。支持直接请求图片。
引入fly
let Fly
//微信小程序
//#ifdef MP-WEIXIN
Fly = require('flyio/dist/npm/wx')
//#endif
//APP版本
//#ifdef APP-PLUS
Fly = require("flyio/dist/npm/weex")
//#endif
//支付宝小程序
//#ifdef MP-ALIPAY
Fly = require('flyio/dist/npm/ap')
//#endif
// H5版本
// #ifdef H5
Fly = require('flyio/dist/npm/fly')
//#endif
let fly = new Fly()
在uni-app中使用
在uni-app 中您也可以将fly实例挂在vue原型上,这样就可以在任何组件中通过this
方便的调用:
var Fly=require("flyio/dist/npm/wx")
var fly=new Fly
... //添加全局配置、拦截器等
Vue.prototype.$request=fly //将fly实例挂在vue原型上
在组件中您可以方便的使用:
this.$request.get("/test",{xx:6}).then((d)=>{
//输出请求数据
console.log(d.data)
//输出响应头
console.log(d.header)
}).catch(err=>{
console.log(err.status,err.message)
})
拦截器封装
Fly支持请求/响应拦截器,可以通过它在请求发起之前和收到响应数据之后做一些预处理
//添加请求拦截器
fly.interceptors.request.use((request)=>{
//给所有请求添加自定义header
request.headers["X-Tag"]="flyio";
//打印出请求体
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")
}
)