微信小程序接口封装、原生接口封装、request、promise封装
相信大家在做微信小程序的时候会有很多地方需要调用接口,就和pc以及手机端一样,多个页面多次调用会有很多状态,那为了节省大家的开发时间就会需要给请求的接口做一些简单封装,便于开发,在这里我用了两个js,一个js封装的是方法名,另外一个是接口名,统一管理
下面这个是统一的接口方法封装
- const baseURL = "接口名";
- const request = params => {
- const token = wx.getStorageSync("token").token;
- return new Promise((resolve, reject) => {
- wx.showLoading();
- wx.request({
- url: baseURL + params.url,
- data: params.data,
- method: params.method,
- header: {
- 'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
- token: token
- },
- success(res) {
- const pages = getCurrentPages();
- // const app = getApp();
- if (res.statusCode === 200) {
- if (res.data.code === 200) {
- resolve(res.data);
- } else if (res.data.code === 401) {
- wx.navigateTo({
- url: '/pages/login/index',
- })
- } else {
- if (res.data.code == 1104) {
- wx.clearStorageSync()
- wx.redirectTo({
- url: '/pages/login/index',
- })
- } else {
- reject(res.data);
- }
- }
- }
- },
- fail(err) {
- reject(err);
- },
- complete() {
- wx.hideLoading();
- }
- });
- });
- };
- const _upload = (filePath, type) => {
- const token = wx.getStorageSync("token").access_token;
- return new Promise((resolve, reject) => {
- wx.showLoading();
- wx.uploadFile({
- url: baseURL + "upload_file", //仅为示例,非真实的接口地址
- filePath,
- name: "file",
- header: {
- authorization: token ? "Bearer " + token : undefined
- },
- formData: {
- type
- },
- success(res) {
- resolve(JSON.parse(res.data));
- },
- fail(err) {
- reject(err);
- },
- complete() {
- wx.hideLoading();
- }
- });
- });
- };
- const _get = (url, data) => {
- return request({
- url,
- data,
- method: "GET"
- });
- };
- const _post = (url, data) => {
- return request({
- url,
- data,
- method: "POST"
- });
- };
- const _put = (url, data) => {
- return request({
- url,
- data,
- method: "PUT"
- });
- };
- const _delete = (url, data) => {
- return request({
- url,
- data,
- method: "DELETE"
- });
- };
- module.exports = {
- baseURL,
- _get,
- _post,
- _put,
- _delete,
- _upload
- };
下面这个是统一的接口管理
- import { _get, _post, _put, _delete, _upload } from "./request";
- // 图片上传
- const getUploadImg = data => {
- return _post("接口名", data);
- };
- module.exports = {
- getUploadImg
- };
封装的比较简单粗暴,不过通俗易懂
使用的时候直接在页面引入就可以
微信小程序接口封装、原生接口封装、request、promise封装的更多相关文章
- 微信小程序的Web API接口设计及常见接口实现
微信小程序给我们提供了一个很好的开发平台,可以用于展现各种数据和实现丰富的功能,通过小程序的请求Web API 平台获取JSON数据后,可以在小程序界面上进行数据的动态展示.在数据的关键 一环中,我们 ...
- 记录一次用宝塔部署微信小程序Node.js后端接口代码的详细过程
一直忙着写毕设,上一次写博客还是元旦,大半年过去了.... 后面会不断分享各种新项目的源码与技术.欢迎关注一起学习哈! 记录一次部署微信小程序Node.js后端接口代码的详细过程,使用宝塔来部署. 我 ...
- 微信小程序(六)-项目实例(原生框架 MINA基配搭建)==01-头搜索框tabbar
项目实例(原生框架 MINA) 1.新建小程序项目 1.用自已的小程序APPID 2.清除整理项目中初建默认无关的代码 1.app.json 中删除logs,同时删除pages下的losgs文件夹 2 ...
- 微信小程序(七)-项目实例(原生框架 MINA转云开发)==02-云开发-配置
云开发:1.就是用云函数的型式来使用云存储和云数据库完成各种操作! 2.只关注调什么函数,完成什么功能即可,无需关心HTTP请求哪一套! 3.此模式不代表没有服务器,只是部署在云环境中 ...
- 整合微信小程序的Web API接口层的架构设计
在我前面有很多篇随笔介绍了Web API 接口层的架构设计,以及对微信公众号.企业号.小程序等模块的分类划分.例如在<C#开发微信门户及应用(43)--微信各个项目模块的定义和相互关系>介 ...
- 原创:微信小程序调用PHP后台接口,解析纯html文本
---效果图片预览--- 1.微信js动态传参:wx.request({ url: 'https://m.****.com/index.php/Home/Xiaoxxf/activ ...
- 微信小程序的ajax数据请求wx.request
微信小程序的ajax数据请求,很多同学找不到api在哪个位置,这里单独把小程序的ajax请求给列出来,微信小程序的请求就是wx.request这个api,wx.request(一些对象参数),微信小程 ...
- 微信小程序开发——列表分页上拉加载封装实现(订单列表为例,订单状态改变后刷新列表滚动位置不变)
业务需求: 业务需求是给订单列表添加分页功能,也就是上拉加载这种每次只请求加载固定数量的数据. 需求分析: 对业务来说就是简单的分页上拉加载,但是对于技术实现来说,除了要处理分页数据的累加加载,还要处 ...
- 微信小程序---客服消息接口调用,拿来即用
如果本文对你有用,请爱心点个赞,提高排名,帮助更多的人.谢谢大家!❤ 如果解决不了,可以在文末进群交流. 如果对你有帮助的话麻烦点个[推荐]~最好还可以follow一下我的GitHub~感谢观看! 在 ...
- 微信小程序(八)-项目实例(原生框架 MINA转云开发)==03-云开发-数据库
云数据库 云数据库开发文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database.html 1.新建云数据库( ...
随机推荐
- python + selenium登陆并点击百度平台
from PIL import Imagefrom selenium.webdriver import DesiredCapabilitiesfrom selenium import webdrive ...
- TensorFlow从0到1之TensorFlow优化器(13)
高中数学学过,函数在一阶导数为零的地方达到其最大值和最小值.梯度下降算法基于相同的原理,即调整系数(权重和偏置)使损失函数的梯度下降. 在回归中,使用梯度下降来优化损失函数并获得系数.本节将介绍如何使 ...
- springboot整合Mybatis(无xml)
1.pom文件 依赖引入 <parent> <groupId>org.springframework.boot</groupId> <artifactId&g ...
- BT.656视频信号解码
BT.656视频信号解码 BT.656协议标准 ITU-R BT.601和ITU-R BT.656是ITU-R(国际电信联盟)制定的标准.严格来说ITU-R BT.656是ITU-R BT.601 ...
- [CentOS 7]挂载ntfs格式U盘
在我们将U盘插入装有CentOS的系统时,经常会出现如图所示的错误提示.这是因为linux系统并不能兼容NTFS的文件系统.其解决方法如下(建议先进入root模式): 1.首先下载"ntfs ...
- lin-cms-dotnetcore功能模块的设计
lin-cms-dotnetcore功能模块的设计 先来回答以下问题. 1.什么是cms? Content Management System,内容管理系统. 2.dotnetcore是什么? .NE ...
- vue全家桶(2.5)
3.8.动态路由匹配和路由组件传参 3.8.1.动态路由匹配 动态路由意味着不固定,具有某种模式,我们希望通过某种匹配方式,把这种不固定的路由形势映射到同一个组件,例如:一个User组件,不同的ID表 ...
- max depth exceeded when dereferencing c0-param0的问题
在做项目的时候,用到了dwr,有一次居然报错,错误是max depth exceeded when dereferencing c0-param0 上网查了一下,我居然传参数的时候传的是object类 ...
- postman无法正常启动
想请教下各位大神,我电脑的postman打开之后就一直转,没法启动是怎么回事?重装了不同版本的也是同样的情况,重启电脑也没用...同样的安装包,在别的电脑上就能正常打开!有什么办法解决吗? 0 20 ...
- c++ 宏定义调用不定参数的函数
假设有一下函数 void Logging(int nLevel, const char* szFormat, ...); 则宏定义如下 #define LOG(FCFL) Logging##FCFL ...