Go语言视频零基础入门到精通

admin

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

1. [code]npm install flyio

复制代码

[/code]
2.使用CDN(浏览器中)

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

复制代码

[/code]
3.UMD（浏览器中

1. [code]https://unpkg.com/flyio/dist/umd/fly.umd.min.js

复制代码

[/code]
因为作者使用npm在mpvue微信小程序中用到，下面将经验详细与大家分享：
npm下载好组建后，我在微信小程序的src/main.js目录下引用了官网的这段代码：

1. [code]var Fly=require("flyio/dist/npm/wx") var fly=new Fly

复制代码

[/code]
刚开始在后面加入了这段代码，

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

复制代码

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

1. var fly=require("flyio")
2. //通过用户id获取信息,参数直接写在url中
3. fly.get("/user?id=133")
4.   .then(function (response) {
5.     console.log(response);
6.   })
7.   .catch(function (error) {
8.     console.log(error);
9.   });
11. //query参数通过对象传递
12. fly.get("/user", {
13.       id: 133
14.   })
15.   .then(function (response) {
16.     console.log(response);
17.   })
18.   .catch(function (error) {
19.     console.log(error);
20.   });

复制代码

发起POST请求：

1. fly.post("/user", {
2.     name: "Doris",
3.     age: 24
4.     phone:"18513222525"
5.   })
6.   .then(function (response) {
7.     console.log(response);
8.   })
9.   .catch(function (error) {
10.     console.log(error);
11.   });

复制代码

发起多并发请求：

1. function getUserRecords() {
2.   return fly.get("/user/133/records");
3. }
5. function getUserProjects() {
6.   return fly.get("/user/133/projects");
7. }
9. fly.all([getUserRecords(), getUserProjects()])
10.   .then(fly.spread(function (records, projects) {
11.     //两个请求都完成
12.   }))
13.   .catch(function(error){
14.     console.log(error)
15.   })

复制代码

直接用

1. request请求数据：

复制代码

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

复制代码

以上由于传递参数用上了 { } 花括号，这是传递JSON数据参数，很多时候我们只需要传递一个【type=type】就可以，
所以我们还可以用如下方式：
main.js
  

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

复制代码

  
index.vue
  

2. 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 => { //输出请求数据
3.         this.allBulletin = res.data.data; }) .catch(err => { console.log(err.status, err.message); });[/i]

复制代码

  
注意⚠️：红色标出部分