上篇简单写了一下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的基础配置

引入文件并实例化一个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...大致就是这样了，拖拖拉拉隔了这么久才写完。。。最近实在太忙了