大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
# 功能概述
[Fly.js](https://github.com/wendux/fly) 一个基于Promise的、强大的、支持多种JavaScript运行时的http请求库. 有了它，您可以使用一份http请求代码在浏览器、微信小程序、Weex、Node、React Native、快应用中都能正常运行。同时可以方便配合主流前端框架 ，最大可能的实现 Write Once Run Everywhere。
Fly.js 是一个基于 promise 的，轻量且强大的Javascript http 网络库，它有如下特点：
1. 提供统一的 Promise API。
2. 浏览器环境下，**轻量且非常轻量**。
3. 支持多种JavaScript 运行环境
4. 支持请求／响应拦截器。
5. 自动转换 JSON 数据。
6. **支持切换底层 Http Engine，可轻松适配各种运行环境**。
7. **浏览器端支持全局Ajax拦截 。**
8. **H5页面内嵌到原生 APP 中时，支持将 http 请求转发到 Native。支持直接请求图片**。
# 引入fly
Flyio在各个平台下的标准API是一致的，只是入口文件不同，在微信小程序中引入：
Npm安装：`npm install flyio –save`.
~~~
var Fly=require(“flyio/dist/npm/wx”)
var fly=new Fly()
~~~
引入之后，您就可以对fly实例进行全局配置、添加拦截器、发起网络请求了。
# 使用
Fly基于Promise提供了Restful API，你可以方便的使用它们，具体请参考[fly 文档](https://github.com/wendux/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/’
…
method: {
//事件处理函数
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)
})
…
}
}
~~~
## 在uni-app中使用
在[uni-app](https://uniapp.dcloud.io/) 中您也可以将fly实例挂在vue原型上，这样就可以在任何组件中通过`this`方便的调用：
~~~
var Fly=require(“flyio/dist/npm/wx”)
var fly=new Fly
… //添加全局配置、拦截器等
Vue.prototype.$request=fly //将fly实例挂在vue原型上
~~~
在组件中您可以方便的使用：
~~~
this.$request.get(“/test”,{xx:6}).then((d)=>{
//输出请求数据
console.log(d.data)
//输出响应头
console.log(d.header)
}).catch(err=>{
console.log(err.status,err.message)
})
~~~
# 封装
实现了基于Token的通讯机制，Token通过store保存在本地。
假设服务端基于Thinkjs实现的Restful服务，API返回的数据格式
“`
{
errno:0, //错误代码
errmsg:”, //错误消息
data:” //业务数据
}
“`
错误代码表
| 错误代码 | 错误描述 |
|———-|————-|
| 0 | API正常访问 |
| 1000 | API没有授权访问 |
| 1001 | API参数校验错误 |
## 拦截器封装
“`
// common/request.js
// 目前没有针对uni的Fly版本，使用wx版本没有问题
import store from ‘@/store’
// H5版本
// #ifdef H5
import Fly from ‘flyio/dist/npm/fly’
// #endif
//微信小程序和APP版本
// #ifndef H5
import Fly from ‘flyio/dist/npm/wx’
// #endif
const request = new Fly();
request.interceptors.request.use((request) => {
uni.showLoading({
title: ‘正在努力加载中…’
});
request.baseURL = ‘http://127.0.0.1:8360/admin’;
const token = store.getters[‘token/getToken’];
if (token) {
//给所有请求添加自定义header
request.headers[“Authorization”] = token;
}
// 防止缓存
if (request.method === ‘POST’ && request.headers[‘Content-Type’] !== ‘multipart/form-data’) {
request.body = {
…request.body,
_t: Date.parse(new Date()) / 1000
}
} else if (request.method === ‘GET’) {
request.params = {
_t: Date.parse(new Date()) / 1000,
…request.params
}
}
return request
})
request.interceptors.response.use(function(response) { //不要使用箭头函数，否则调用this.lock()时，this指向不对
let errmsg = ”;
const data = response.data;
if (!data || typeof data !== ‘object’) {
errmsg = ‘服务器响应格式错误’;
uni.showToast({
title: errmsg,
icon: ‘none’
})
} else {
const errno = data.errno;
switch (errno) {
case 1001:
// 数据检验未通过
for (let i in data.data) {
errmsg += data.data[i] + ‘;’
}
break;
default:
errmsg = data.errmsg;
break
}
if (errmsg !== ” && errno !== 0) {
uni.showToast({
title: errmsg,
icon: ‘none’
})
}
if (errmsg !== ” && errno === 0) {
uni.showToast({
title: errmsg,
icon: ‘none’
})
}
}
uni.hideLoading();
return response.data; //只返回业务数据部分
}, function(err) {
// console.log(“error-interceptor:” + JSON.stringify(err))
let errmsg = err.message;
switch (err.status) {
case 0:
errmsg = “网络连接错误”;
uni.showToast({
title: errmsg,
icon: ‘none’
})
break;
case 401:
store.dispatch(‘logout’);
uni.redirectTo({
url: ‘/pages/auth/login’
})
break;
default:
uni.showToast({
title: errmsg,
icon: ‘none’
})
}
})
export default request
export {
request
}
“`
# 使用request
约定将所有的Restful API请求封，并命名方便页面调用。统一API管理可以降低后续维护的难度。
“`
import request from ‘@/common/request’
export default {
create(data) {
return new Promise((resolve, reject) => {
request.post(‘/esc/company’, data).then(response => {
resolve(response)
})
})
},
getList(map = {}) {
return new Promise((resolve, reject) => {
request.get(‘/esc/company’, map).then(response => {
console.log(response)
resolve(response)
})
})
},
getInfo(id, map = {}) {
return new Promise((resolve, reject) => {
request.get(‘/esc/company/’ + id, {
params: map
}).then(response => {
resolve(response)
})
})
},
update(id, data={}) {
return new Promise((resolve, reject) => {
request.put(‘/esc/company/’ + id, data).then(response => {
resolve(response)
})
})
},
delete(id) {
return new Promise((resolve, reject) => {
request.delete(‘/esc/company/’ + id).then(response => {
resolve(response)
})
})
}
}
“`
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/197756.html原文链接：https://javaforall.net
