Flyio封装API接口（uniapp开发微信小程序）

本文主要是介绍Flyio封装API接口（uniapp开发微信小程序），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Flyio封装API接口

1）flyio 是什么?

2）flyio能干什么？

3）flyio使用

---

1）flyio 是什么?

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

2）flyio能干什么？

Fly.js 是一个基于 promise 的，轻量且强大的Javascript http 网络库，它有如下特点：

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

3）flyio使用

1、安装（使用npm或yarn等)

npm install flyio

2、微信小程序中引入flyio，新建utils文件夹，在文件夹中新建request.js

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

3、全局请求配置

//设置超时
fly.config.timeout = 30000;
//设置请求基地址
fly.config.baseURL = 'https://uniapp.dcloud.io/api';

4、拦截器

// 添加请求拦截器
fly.interceptors.request.use((request) => {// 给所有请求添加自定义header，带上token信息让服务器验证用户登陆let token = uni.getStorageSync('aliToken');request.headers['Authorization'] = token;// 在当前页面显示导航条加载动画uni.showNavigationBarLoading();return request;
})
// 添加响应拦截器，响应拦截器会在then/catch处理之前执行
fly.interceptors.response.use((response) => {if (response.data.errorNo != 0) {uni.showToast({title: response.data.errorInfo,icon: 'none',});}uni.hideNavigationBarLoading()return response.data; //请求成功之后将返回值返回},(err) => {// 在当前页面隐藏导航条加载动画uni.hideNavigationBarLoading()if (err.status === 0) {uni.showToast({title: '网络请求延时',icon: "none",});return Promise.reject(err);}let code = err.response.status;if (code === 401) {uni.navigateTo({url: "/pages/mine/login?interceptors=1"});} else if (code === 403) {uni.showToast({title: '没有权限',icon: "none",});return Promise.reject(err);} else {uni.showToast({title: err.response.data.message,icon: "none",});return Promise.reject(err);}}
)
export default fly;

5、添加api 接口配置，在utils文件夹中新建api.js，引入Fly

import fly from './request'export default {// 新增一条打卡记录addCheck: (params) => {return fly.post('/check/add', params);},// 获取用户信息getUser: () => {return fly.get('/user/get');},// 查询点赞的用户getLikeUsers: (params) => {return fly.get('/user-like-check/getUsers?id=' + params);},...
}

6、挂载api到全局,在main.js中引入挂载

import API from "./utils/api.js"
Vue.prototype.$api = API

7、调用接口

let params = {// 评论文本content: this.content,groupId: this.curGroup,
};
this.$api.addCheck(params).then(res => {console.log(res)}).catch(err => {console.log(err)});// 调用获取用户信息接口
this.$api.getUser().then(res => {console.log(res)
}).catch(err => {console.log(err)
})

这篇关于Flyio封装API接口（uniapp开发微信小程序）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---