微信小程序mpvue+vantUI+flyio+vuex入坑(2)

liya_too
2,779 阅读2分钟

上篇简单写了一下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...大致就是这样了，拖拖拉拉隔了这么久才写完。。。最近实在太忙了

avatar
文章
阅读
粉丝