flyme开放平台_uniapp重定向
大家好，又见面了，我是你们的朋友全栈君。
# 功能概述
[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.cn/197756.html原文链接：https://javaforall.cn
相关文章
- 09_Linux基础-SHELL-标准输入与标准输出-重定向-管道
- [勘误篇] 图解eBPF socket level 重定向的内核实现细节
- ServletRequest HttpServletRequest 请求方法 获取请求参数 请求转发 请求包含 请求转发与重定向区别 获取请求头字段详解编程语言
- HttpServletResponse ServletResponse 返回响应 设置响应头设置响应正文体 重定向 常用方法 如何重定向 响应编码 响应乱码详解编程语言
- 「Linux 重定向与缓冲：解锁更高效率」（linux重定向缓冲）
- Linux输入输出重定向：实现更有效的操作（linux输入输出重定向）
- HttpClient 302重定向详解编程语言
- 输出重定向Linux SH管道：输入输出重定向（linuxsh输入）
- 解读“重定向SMB”攻击
- Linux重定向追加：实现简单指令操作的功能（linux重定向追加）
- Mastering Linux Output Redirection: A Comprehensive Guide（linux输出重定向）
- 输入Linux重定向文件输入操作详细指南（linux重定向文件）
- Redis集群不断重定向的迷宫（redis集群一直重定向）