mpvue中flyio的使用

2018 年 11 月 02 日 • 阅读数: 115

mpvue中使用flyio

简介

Fly.js 一个基于Promise的、强大的、支持多种JavaScript运行时的http请求库。有了它,您可以使用一份http请求代码在浏览器、微信小程序、Weex、Node、React Native、快应用中都能正常运行。同时可以方便配合主流前端框架 ,最大可能的实现 Write Once Run Everywhere。本文主要介绍一下如何在微信小程序中使用flyio。

安装

和其他的JS库安装一样,直接通过 npm 进行安装

cnpm install flyio --save

使用

在mpvue中使用 flyio 和在Vue中使用 axios 是非常类似的,按照我的习惯,我喜欢将所有的api集中到一个文件中进行管理,并且后期需要加入请求拦截器等情况,所以,这里我在资源文件夹(src)下新建了两目录(api、utils),在api目录下新建 api.js 文件,在utils目录下新建 request.js 文件

编辑 request.js 文件

在该文件中,先引入 Fly 然后实例化一个 Fly 对象,定义一个主机地址,为请求添加请求头信息,最后将对象暴露出来

import Fly from 'flyio/dist/npm/wx';

const fly = new Fly();
const host = 'http://127.0.0.1:8000/api';


fly.interceptors.request.use((config,promise)=>{
  config.headers["X-Tag"]="flyio";
  return config;
});

fly.config.baseURL=host;

export default fly

编辑 api.js 文件

request.js 文件中引入 Fly 的对象,使用该对象编写请求函数,将所有的函数暴露出去

import fly from '../utils/request'

// 获取Test接口
export const getTest = () => { return fly.get(`/test/`) };

// 添加Test接口
export const addTest = (data) => { return fly.post(`/test/`, data) };

// 删除Test接口
export const delTest = (id) => { return fly.delete(`/test/${id}/`) };

修改src目录下的 main.js 文件

这一步修改可以做也可以不做,也许有些地方,你想要在Vue组件中直接发请求,就可以将 Fly 对象挂载到Vue实例上,在Vue组件中,就可以直接使用 $fly 发生请求了

import fly from './utils/request';

Vue.prototype.$fly = fly;

两种请求的发起方式:

第一种方式,从api中引入我们需要的请求接口,写一个方法来调用请求接口,可以在需要的时候调用该方法

<script>
import { getTest } from "../../../api/api";

export default {
  methods: {
    getTest() {
      console.log(this.test);
      getTest().then((res) => {console.log(res)})
    },
  },
  created() {
    this.getTest()
  }
};
</script>

第二种方式,直接用 $fly 发起请求,我比较推荐第一种方式,应为这样便于接口的管理和重用

<script>
export default {
  methods: {
    getTest() {
      this.$fly.get("/test/").then((res)=> {console.log(res)})
    },
  },
  created() {
    this.getTest()
  }
};
</script>
标签: mpvueflyio

召唤伊斯特瓦尔