当前位置：首页 > news >正文

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

news 来源：原创 2024/5/13 5:49:31

Flyio封装API接口

1）flyio 是什么?

2）flyio能干什么？

3）flyio使用

1）flyio 是什么?

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

2）flyio能干什么？

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

提供统一的 Promise API。
浏览器环境下，轻量且非常轻量。
支持多种JavaScript 运行环境
支持请求／响应拦截器。
自动转换 JSON 数据。
支持切换底层 Http Engine，可轻松适配各种运行环境。
浏览器端支持全局Ajax拦截。
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)
})