在小顺序/mpvue中运用flyio提议收集要求

2024年4月28日 199次阅读 来源: 杜文

Fly.js 一个基于Promise的、壮大的、支撑多种JavaScript运转时的http要求库. 有了它，您可以运用一份http要求代码在浏览器、微信小顺序、Weex、Node、React Native、快运用中都能平常运转。同时可以轻易合营主流前端框架 ，最大可以的完成
Write Once Run Everywhere。上一篇文章引见了在
快运用中运用flyio，本文主要引见一下如安在微信小顺序中运用flyio。

Flyio Github: https://github.com/wendux/fly

题目

跟着 Weex 、mpvue 的宣布，他们都是支撑Vue.js语法。现在vue已你可以运转在浏览器、小顺序和Native了。只管各个平台仍有差别，但已基本能完成 Write Once Run Everywhere 。这使得我们可以在多个端上完成尽量大限制在代码复用。然则无论是 vue 照样Weex 、mpvue，它们本质上都只是一个View层，也就说最好的状况，也只能完成UI复用。但关于一个运用顺序来讲，除了UI，最主要的就是数据了，而数据泉源平常都是来自收集要求（大多数都是http）。在运用这些框架时，您的收集要求，都须要运用平台特定的API！这很蹩脚，意味着您收集要求的代码不能复用，所以只管UI可以复用，但我们还须要去适配收集要求部份的代码。

Flyio简介

要上述题目，就须要一个能支撑多个平台收集库，用户层供应一致的API，将平台差别在底层屏障。而 Fly.js就是这酱紫的一个收集库，为了轻易axios运用者迁徙，fly.js API设想作风和axios类似（但不完全相同）！

Fly.js 经由过程在差别 JavaScript 运转时经由过程在底层切换差别的 Http Engine来完成多环境支撑，但同时对用户层供应一致、规范的Promise API。不仅如此，Fly.js还支撑要求/相应拦截器、自动转化JSON、要求转发等功能，详情请参考：https://github.com/wendux/fly 。下面我们看看在微信小顺序、mpvue中和中怎样运用fly.

微信小顺序

微信小顺序采纳web开辟手艺栈，运用JavaScript言语开辟，然则JavaScript运转时和浏览器又有所差别，致使axios、jQuery等库没法在微信小顺序中运用，而flyio可以。下面给出详细运用方法

引入fly

Flyio在各个平台下的规范API是一致的，只是进口文件差别，在微信小顺序中引入：

Npm装置：npm install flyio --save.

var Fly=require("flyio/dist/npm/wx") 
var fly=new Fly

假如您的微信小顺序项目没有运用npm来治理依靠，您可以直接下载源码到您的小顺序工程，下载链接wx.js 或 wx.umd.min.js .下载恣意一个，保存到当地工程目次，假设在“lib”目次，接下来引入：

var Fly=require("../lib/wx") //wx.js为您下载的源码文件
var fly=new Fly; //建立fly实例

引入以后，您就可以对fly实例举行全局设置、增加拦截器、提议收集要求了。

运用

Fly基于Promise供应了Restful API，你可以轻易的运用它们，详细请参考fly 文档 。下面给出一个简朴的示例

//增加拦截器
fly.interceptors.request.use((config,promise)=>{
    //给一切要求增加自定义header
    config.headers["X-Tag"]="flyio";
    return config;
})
//设置要求基地点
fly.config.baseURL='http://www.dtworkroom.com/doris/1/2.0.0/'
...

Page({
  //事宜处置惩罚函数
  bindViewTap: function() {
    //提议get要求
    fly.get("/test",{xx:6}).then((d)=>{
      //输出要求数据
      console.log(d.data)
      //输出相应头
      console.log(d.header)
    }).catch(err=>{
      console.log(err.status,err.message)
    })
    ...
  })
})

在mpvue中运用

在mpvue 中您也可以将fly实例挂在vue原型上，如许就可以在任何组件中经由过程this轻易的挪用：

var Fly=require("flyio/dist/npm/wx") 
var fly=new Fly
... //增加全局设置、拦截器等
Vue.prototype.$http=fly //将fly实例挂在vue原型上

在组件中您可以轻易的运用：

this.$http.get("/test",{xx:6}).then((d)=>{
      //输出要求数据
      console.log(d.data)
      //输出相应头
      console.log(d.header)
    }).catch(err=>{
      console.log(err.status,err.message)
    })

反应

假如您有题目迎接在 在github 提issue . fly.js github: github.com/fly

    原文作者：杜文
    原文地址: https://segmentfault.com/a/1190000014039585
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞