Fly.js 一个基于Promise的、强大的、支持多种JavaScript运行时的http请求库. 有了它,您可以使用一份http请求代码在浏览器、微信小程序、Weex、Node、React Native、快应用中都能正常运行。同时可以方便配合主流前端框架 ,最大可能的实现 Write Once Run Everywhere。本文主要介绍一下如何在微信小程序中使用flyio的配置。
npm安装:
npm install flyio --save
import qs from 'qs'
import store from '../store'
const Fly = require('flyio/dist/npm/wx')
const fly = new Fly()
let reqCount = 0 // 重发请求的次数
// 定义公共headers
fly.config.headers = {token: 'token'}
// //设置超时
fly.config.timeout = 10000
// //设置请求基地址
fly.config.baseURL = '' // 生产环境
// 添加请求拦截器
fly.interceptors.request.use(config => {
// 添加接口请求中的效果
wx.showLoading({
title: '加载中',
mask: true
})
console.log(config)
config.headers = {
'X-Tag': 'flyio',
'content-type': 'application/json'
}
// 给所有请求添加自定义header
const token = store.state.user.token
config.headers['cAuthToken'] = token
// debugger
if (config.headers['Content-Type'] !== 'application/json') {
config.body = qs.stringify(config.body)
}
// 设置公共参数
let authParams = {
'categoryType': 'SaleGoodsType@sim',
'streamNo': 'wxapp153570682909641893',
'reqSource': 'MALL_H5',
'appid': 'string',
'timestamp': new Date().getTime(),
'sign': 'string'
}
config.body && Object.keys(config.body).forEach((val) => {
if (config.body[val] === '') {
delete config.body[val]
}
})
config.body = {
...config.body,
...authParams
}
// 可以显式返回config, 也可以不返回,没有返回值时拦截器中默认返回config
return config
}, error => {
Promise.reject(error)
})
// 响应拦截器
fly.interceptors.response.use(async response => {
// 同意处理一些响应的code状态
// do sthing
// 只将请求结果的data字段返回
console.log(response, response.request)
// 移除接口请求中的效果
wx.hideLoading()
if (!response.data) {
let data = await store.dispatch('wxLogin').then(async () => {
// 重发请求的次数
reqCount += 1
if (reqCount < 3) {
console.log(reqCount)
let res = await fly.request(response.request).then(res => res)
return res
} else {
mpvue.redirectTo({
url: '重定向路径'
})
}
})
return data
} else {
return response.data
}
},
(err) => {
// 发生网络错误后会走到这里
// 移除接口请求中的效果
wx.hideLoading()
console.log(err)
if (err) {
return '请求失败'
}
// return Promise.resolve(err)
})
export default fly
使用时直接在使用的js文件中引用:
import fly from './apiconfig'
// 获取信息
export function getHospitalList (data) {
return fly.request(
'wxapp/list',
data,
{method: 'get'}
)
}