Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >php调用第三方api接口_uniapp ios原生插件开发

php调用第三方api接口_uniapp ios原生插件开发

作者头像
全栈程序员站长
发布于 2022-10-04 12:53:38
发布于 2022-10-04 12:53:38
65700
代码可运行
举报
运行总次数:0
代码可运行

大家好,又见面了,我是你们的朋友全栈君。

Flyio封装API接口

1)flyio 是什么?

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

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安装

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm install flyio
  1. 微信小程序中引入flyio,新建utils文件夹,在文件夹中新建request.js
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let Fly = require("flyio/dist/npm/wx")
let fly = new Fly
  1. 全局请求配置
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//设置超时
fly.config.timeout = 30000;
//设置请求基地址
fly.config.baseURL = 'https://uniapp.dcloud.io/api';
  1. 拦截器
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 添加请求拦截器
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;
  1. 添加api 接口配置,在utils文件夹中新建api.js,引入Fly
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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);
},
...
}
  1. 挂载api到全局,在main.js中引入挂载
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import API from "./utils/api.js"
Vue.prototype.$api = API
  1. 调用接口
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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)
})

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/196024.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年9月8日 上,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
flyme开放平台_uniapp重定向
[Fly.js](https://github.com/wendux/fly) 一个基于Promise的、强大的、支持多种JavaScript运行时的http请求库. 有了它,您可以使用一份http请求代码在浏览器、微信小程序、Weex、Node、React Native、快应用中都能正常运行。同时可以方便配合主流前端框架 ,最大可能的实现 Write Once Run Everywhere。
全栈程序员站长
2022/10/03
8450
独特的微信号_uniapp和原生小程序混合开发
一个支持所有JavaScript运行环境的基于Promise的、支持请求转发、强大的http请求库。可以让您在多个端上尽可能大限度的实现代码复用。
全栈程序员站长
2022/10/03
7990
uni-app中使用flyio请求_uniapp能否上架
因为最近需要使用uni-app进行小程序的开发,所以最近在搭建小程序的环境,作为一个使用vue的前端小白,自然选择了支持vue的uni-app。但是uni自带的uni.request需要自己封装(因为懒)所以选择了flyio进行请求封装。
全栈程序员站长
2022/10/29
8520
php小程序开发完整教程_微信小程序request封装
一个支持所有JavaScript运行环境的基于Promise的、支持请求转发、自动转换JSON、支持请求/响应拦截器、强大的http请求库。 可以让您在多个端上尽可能大限度的实现代码复用。 flyio官方文档 flyio下载地址
全栈程序员站长
2022/10/04
1.3K0
php小程序开发完整教程_微信小程序request封装
原生微信小程序flyio封装多baseURL配置请求,如同axios一样非常爽利的使用api
1.下载 引入 flyio 基于 promise Javascript http请求的终极解决方案。也就是说,在任何能够执行 Javascript 的环境,只要具有访问网络的能力,Fly都能运行在其上,提供统一的API。 fly下载地址
全栈程序员站长
2022/10/04
1.4K0
vue中Axios的封装和API接口的管理
回归正题,我们所要的说的axios的封装和api接口的统一管理,其实主要目的就是在帮助我们简化代码和利于后期的更新维护。
Nealyang
2019/09/29
3.8K0
vue中Axios的封装和API接口的管理
mpvue搭建小程序框架
由于mpvue框架是完全基于Vue框架的(重写了其runtime和compiler) 运行时框架 runtime 和代码编译器 compiler 实现
达达前端
2019/07/15
2.5K0
mpvue搭建小程序框架
uni-app API封装:让接口调用绽放新光彩
uni-app是一款基于Vue.js框架的跨平台开发工具,可以将代码编译成H5、小程序、App等不同平台的应用。在进行uni-app开发时,网络请求是必不可少的环节。为了方便开发,我们可以封装一些网络请求方法,以便在多个页面中复用,并且可以统一处理错误信息等问题,提高开发效率和代码质量。本文将介绍如何封装网络请求方法。
Front_Yue
2023/12/11
3.8K0
uni-app API封装:让接口调用绽放新光彩
mpvue中使用flyio请求「建议收藏」
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
全栈程序员站长
2022/10/04
2660
flyio 无感刷新token
大家好,又见面了,我是你们的朋友全栈君。 https://www.jianshu.com/p/b37a86fe0ac7?utm_campaign=maleskine&utm_content=note&
全栈程序员站长
2022/10/04
1.1K0
如何在Vue项目中封装axios
axios 是一个基于 XMLHttpRequest 的轻量级HTTP客户端,适用于浏览器和Node.js环境。它提供以下特性:
全栈若城
2024/10/13
2930
H5用axios代替Ajax调取服务器接口
第一步:在a.html引入vue.js, axios文件, a.js, config.js 和 api.js,路径自己配好
青梅煮码
2023/02/18
9840
封装 uniapp 请求库的最佳实践
在前端开发中,HTTP 请求是与服务器进行数据交互的核心手段。无论是获取数据还是提交数据,前端应用几乎都离不开 HTTP 请求。在 uniapp 中,uni.request 是官方提供的用于发起 HTTP 请求的基础 API。然而,直接使用 uni.request 存在一些问题和不足,比如:
曾高飞
2025/05/20
1470
Vue笔记:封装 axios 为插件使用
自从Vue2.0推荐大家使用 axios 开始,axios 被越来越多的人所了解。使用axios发起一个请求对大家来说是比较简单的事情,但是axios没有进行封装复用,项目越来越大,引起的代码冗余。就会非常麻烦的一件事。所以本文会详细的跟大家介绍,如何封装请求,并且在项目组件中复用请求。有需要的朋友可以做一下参考。
朝雨忆轻尘
2019/06/19
2.1K0
Vue笔记:封装 axios 为插件使用
面试官:Vue项目中有封装过axios吗?怎么封装的?
基于 XMLHttpRequest 服务来执行 HTTP 请求,支持丰富的配置,支持 Promise,支持浏览器端和 Node.js 端。自Vue2.0起,尤大宣布取消对 vue-resource 的官方推荐,转而推荐 axios。现在 axios 已经成为大部分 Vue 开发者的首选
@超人
2021/02/26
2.1K0
uniapp 网络请求封装【luch-request 3.x】
luch-request 基于 Promise 开发的 uni-app 跨平台请求库。对于使用者来说,最突出的优点是: 方便简单的自定义能力,可以通过 custom 自定义参数;相当于 uni.request() 来说,可配置更高,支持请求拦截,响应拦截
很酷的站长
2022/12/04
3.6K0
uniapp 网络请求封装【luch-request 3.x】
axios详解以及完整封装方法
Axios 是一个基于 promise 网络请求库,作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。
HelloWorldZ
2024/03/20
11.7K0
Vue3中使用axios
axios是一个基于Promise的HTTP请求库,它可以在浏览器和Node.js中使用。axios的功能非常请打,支持Promise API、可以拦截请求和响应、可以转换请求和响应数据、支持取消请求、可以自动转换JSON数据等。
九仞山
2023/10/14
2K0
Vue3中使用axios
使用Fly.io进行Ajax请求管理:移动端登录鉴权开发详解
在移动应用开发中,登录鉴权是一个至关重要的环节。它不仅关系到用户数据的安全性,还直接影响用户体验。传统的登录鉴权方式往往涉及复杂的服务器端逻辑和繁琐的前端代码。而使用Fly.io这样的轻量级HTTP请求库,可以极大地简化这一过程,提高开发效率和应用性能。
lyushine
2024/12/04
1890
详细讲解axios封装与api接口封装管理
axios的封装和api接口的统一管理,其实主要目的就是在帮助我们简化代码和利于后期的更新维护。
江一铭
2022/06/16
3.8K0
相关推荐
flyme开放平台_uniapp重定向
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验