上篇简单写了一下mpvue+router+ui库的配置,这篇接着写接口请求flyio
简单介绍一下flyio
Fly.js一个支持所有JavaScript运行环境的基于Promise的、支持请求转发、强大的http请求库。可以让您在多个端上尽可能大限度的实现代码复用。
浏览器支持
Chrome | Firefox | Safari | Opera | Edge | IE |
---|---|---|---|---|---|
✔ | ✔ | ✔ | ✔ | ✔ | > 8 |
目前Fly.js支持的平台包括:Node.js 、微信小程序 、Weex 、React Native 、Quick App 和浏览器,这些平台的 JavaScript 运行时都是不同的。更多的平台正在持续添加中,请保持关注。
Fly.js 是一个基于 promise 的,轻量且强大的Javascript http 网络库,它有如下特点:
- 提供统一的 Promise API。
- 浏览器环境下,轻量且非常轻量 。
- 支持多种JavaScript 运行环境
- 支持请求/响应拦截器。
- 自动转换 JSON 数据。
- 支持切换底层 Http Engine,可轻松适配各种运行环境。
- 浏览器端支持全局Ajax拦截 。
- H5页面内嵌到原生 APP 中时,支持将 http 请求转发到 Native。支持直接请求图片。
Flyio帮助文档 Fly.js,具体的可以查看文档
安装
npm install flyio -S
复制代码
开始使用
在src目录下创建一个api文件夹,新建一个apiconfig.js用来写fly的基础配置
const Fly = require('flyio/dist/npm/wx')
const fly = new Fly()
复制代码
官方文档写的是new Fly,由于我用了eslint,这样会提示错误,所以这样写,其实意思是一样的
公共基础配置
// 定义公共headers
fly.config.headers={token: test_token}
// //设置超时
// fly.config.timeout=10000;
// //设置请求基地址
// fly.config.baseURL = 'http://180.76.246.122/api/'
fly.config.baseURL = 'https://api.xxxx.com/api/'
复制代码
拦截器配置
请求拦截器
// 添加请求拦截器
fly.interceptors.request.use(config => {
let token = store.state.user.token
console.log(token)
// 给所有请求添加自定义header
config.headers['token'] = token
config.body = qs.stringify(config.body)
// 可以显式返回request, 也可以不返回,没有返回值时拦截器中默认返回request
return config
}, error => {
Promise.reject(error)
})
复制代码
响应拦截器
fly.interceptors.response.use(
(response) => {
// 同意处理一些响应的code状态
// do sthing
// 只将请求结果的data字段返回
return response.data
},
(err) => {
// 发生网络错误后会走到这里
console.log(err)
// return Promise.resolve(err)
}
)
复制代码
使用fly发起请求
我这边是做了一个公共的处理,apiconfig处理好了之后,export 出去实例化的fly,例如我在userApi.js里使用
import fly from './apiconfig'
// 根据code登录获取token
export function loginByCode (data) {
return fly.request(
'User/LoginByCode',
data,
{method: 'post'}
)
}
export function getUserInfo () {
return fly.request(
'User/GetUserInfo',
null,
{method: 'get'}
)
}
复制代码
这里列出了post,和get,当然也可以直接写,具体更多使用看使用手册
fly.get('url', {id: 1}).then()
fly.post('url', {id: 1}).then()
复制代码
fly请求参数顺序是固定的,因为它不是作为一个object传过去的。 写好之后,在页面里直接使用就行
引入文件
import {loginByCode} from '@/api/userApi'
复制代码
loginByCode(params).then(res => {
console.log(res)
})
复制代码
——————————————————————————————————————
emm...大致就是这样了,拖拖拉拉隔了这么久才写完。。。最近实在太忙了