mpvue微信小程序http请求-fly.js

fly.js是什么？

　　一个支持所有JavaScript运行环境的基于Promise的、支持请求转发、强大的http请求库。可以让您在多个端上尽可能大限度的实现代码复用（官网解释）

fly.js有什么特点：

提供统一的 Promise API。
浏览器环境下，轻量且非常轻量 。
支持多种JavaScript 运行环境
支持请求／响应拦截器。
自动转换 JSON 数据。
支持切换底层 Http Engine，可轻松适配各种运行环境。
浏览器端支持全局Ajax拦截。
H5页面内嵌到原生 APP 中时，支持将 http 请求转发到 Native。支持直接请求图片

定位与目标：

　　Fly 的定位是成为 Javascript http请求的终极解决方案。也就是说，在任何能够执行 Javascript 的环境，只要具有访问网络的能力，Fly都能运行在其上，提供统一的API。

使用方法：　

1.结合npm

npm install flyio

2.使用CDN(浏览器中)

<script src="https://unpkg.com/flyio/dist/fly.min.js"></script>

3.UMD（浏览器中

https://unpkg.com/flyio/dist/umd/fly.umd.min.js

因为作者使用npm在mpvue微信小程序中用到，下面将经验详细与大家分享：

npm下载好组建后，我在微信小程序的src/main.js目录下引用了官网的这段代码：

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

刚开始在后面加入了这段代码，

Vue.prototype.$http = fly // 将fly实例挂在vue原型上

但是在post传参时一直失败，最后不得不放弃。老老实实在每次使用是用上以下代码来请求数据：

发起GET请求：

var fly=require("flyio")
//通过用户id获取信息,参数直接写在url中
fly.get('/user?id=133').then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});//query参数通过对象传递
fly.get('/user', {id: 133}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});

发起POST请求：

fly.post('/user', {name: 'Doris',age: 24phone:"18513222525"}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});

发起多并发请求：

function getUserRecords() {return fly.get('/user/133/records');
}function getUserProjects() {return fly.get('/user/133/projects');
}fly.all([getUserRecords(), getUserProjects()]).then(fly.spread(function (records, projects) {//两个请求都完成})).catch(function(error){console.log(error)})

直接用request请求数据：

/直接调用request函数发起post请求
fly.request("/test",{hh:5},{method:"post",timeout:5000 //超时设置为5s})
.then(d=>{ console.log("request result:",d)})
.catch((e) => console.log("error", e))

以上由于传递参数用上了 { } 花括号，这是传递JSON数据参数，很多时候我们只需要传递一个【type=type】就可以，

所以我们还可以用如下方式：

main.js

var Fly = require("flyio/dist/npm/wx")
var fly = new Fly
Vue.prototype.$http = fly // 将fly实例挂在vue原型上

index.vue

var newest = String(this.$mp.query.type);this.$http.post("https://tashimall.miniprogram.weixin-api-test.yokead.com/bulletin/getBulletin.json","type=" + newest).then(res => {//输出请求数据this.allBulletin = res.data.data;}).catch(err => {console.log(err.status, err.message);});

mpvue微信小程序http请求-fly.js相关推荐

mpvue 微信小程序_使用Vue.js开发微信小程序：开源框架mpvue解析
戳蓝字"CSDN云计算"关注我们哦! 作者 | 成全责编 | 阿秃转自 | 美团技术团队企业博客前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开 ...
微信小程序request请求封装；微信小程序封装request请求；uni-app小程序封装request请求；
本片封装了微信小程序request请求:为别是post get put请求,重点在request.js文件 1.新增四个文件 2.根目录下的utils下的request.js封装uni.request ...
mpvue 微信小程序canvas生成海报
mpvue 微信小程序canvas生成海报效果贴代码 html <template><view class="poster ...
微信小程序解决请求服务器手机预览请求不到数据的方法
微信小程序解决请求服务器手机预览请求不到数据的方法微信小程序的文档中明确说明了所有的请求是必须使用https的,以没用过https,由于小程序,不得不接触到https,研究了好长时间把tomcat ...
微信小程序网络请求代码片段
在微信小程序根目录建立/static/js/lsk.js.输入以下代码 function dopost(api,params,callback){var webhost="http://ne ...
微信小程序js数组初始化_微信小程序学习Course 3-2 JS数组对象学习
微信小程序学习Course 3-2 JS数组对象学习本节主要介绍JS中的数组. 3-2.1 数组的声明数组声明的方式多种,如下例.一般我们可以先创建一个空数组,然后再填充. var names = ...
微信小程序-配置请求合法域名的问题以及豆瓣api问题
微信小程序-配置请求合法域名的问题以及豆瓣api问题 https://www.jianshu.com/p/b71200e0b9b9
封装微信小程序api请求地址
封装微信小程序api请求地址 const API_BASE_URL = 'http://localhost:8080/test/api/'; module.exports = {IndexUrlNew ...
微信小程序如何请求数据
微信小程序呢不存在ajax,那么它是如何实现数据请求功能的呢? 在微信官方文档中提供了API的调用wx.request()来请求数据在数据请求之前,我们需要把微信小程序数据请求的坑过一遍 1:微信小 ...

mpvue微信小程序http请求-fly.js

mpvue微信小程序http请求-fly.js

mpvue微信小程序http请求-fly.js相关推荐

最新文章

热门文章