mpvue项目集成flyio网络请求库

github地址：https://github.com/wendux/fly
flyio是个跨平台的网络请求库，目前Fly.js支持的平台包括：Node.js 、微信小程序 、Weex 、React Native 、Quick App 和浏览器。

也就是说在以上的平台中，我们可以用flyio直接发起http请求，而且在代码中的表现是统一的的。

安装依赖

cnpm i -S flyio

使用

创建request工具类，初始化Flyio对象

function createFly() {
  if (mpvuePlatform === 'wx') {
    const Fly = require('flyio/dist/npm/wx')
    return new Fly()
  } else if (mpvuePlatform === 'my') {
    const Fly = require('flyio/dist/npm/ap')
    return new Fly()
  } else {
    return null
  }
}

处理get请求

export function get(url, params = {}) {
  const fly = createFly()
  if (fly) {
    return new Promise((resolve, reject) => {
      fly.get(url, params).then(response => {
        console.log(response)
        resolve(response)
      }).catch(err => {
        console.log(err)
        handleError(err)
        reject(err)
      })
    })
  }
}

处理post请求

export function post(url, params = {}) {
  const fly = createFly()
  if (fly) {
    return new Promise((resolve, reject) => {
      fly.post(url, params).then(response => {
        console.log(response)
        resolve(response)
      }).catch(err => {
        console.log(err)
        handleError(err)
        reject(err)
      })
    })
  }
}

在页面中的使用

<template>
  <div>

    <div class="text">
      ibook
    </div>

    <van-button type="primary" @click="jump">按钮</van-button>


  </div>

</template>

<script>
  import {get} from '@/utils/request'

export default {
  methods:{
    jump(){
      // this.$router.push('/pages/index/main')
      get('https://www.baidu.com').then(res =>{
        console.log(res)
      })

    }

  }

}
</script>

<style lang="scss" scoped>
.text{
  color: red;
}
</style>

在微信开发者工具中的运行结果

image.png

至此，flyio库就集成完毕了。