小程序封装request请求,统一API
程序开发中都会调用后端工程师开发的API,小程序的开发文档提供了相对实用的APIwx.request(),但是在开发的过程中,又遇到了一些问题,在小程序的项目开发时,调用的API不止一个,同一个API调用不止一次。同时,对于调用的API的管理也十分复杂,这样的背景下,对wx.request()方法的封装变得尤为重要。
本文的解决思路为:将API的路径和方法放在一个文件里面方便管理;封装小程序的request方法,并返回promise处理(ES6)。
一、units文件夹中新建request.js文件
// utils/request.js
//封装request let apiRequest = (url, method, data, header) => { //接收所需要的参数,如果不够还可以自己自定义参数
let promise = new Promise(function (resolve, reject) {
wx.showNavigationBarLoading() //在标题栏中显示加载
wx.request({
url: url,
data: data ? data : null,
method: method,
header: header ? header : { 'content-type': 'application/x-www-form-urlencoded' },
complete: function () {
wx.hideNavigationBarLoading(); //完成停止加载
wx.stopPullDownRefresh(); //停止下拉刷新
},
success: function (res) {
//接口调用成功
resolve(res.data); //根据业务需要resolve接口返回的json的数据
},
fail: function (res) {
wx.showModal({
showCancel: false,
confirmColor: '#1d8f59',
content: '数据加载失败,请检查您的网络,点击确定重新加载数据!',
success: function (res) {
if (res.confirm) {
apiRequest(url, method, data, header);
}
}
});
wx.hideLoading();
}
})
});
return promise; //注意,这里返回的是promise对象
} export default apiRequest;
二、units文件夹中新建api.js文件
import apiRequest from './request.js';
const HOST = 'http://www.mingmingym.com';
const API_LIST = {
all: {
method: 'POST',
url: '/e/extend/api/type.php'
},
} /*
多参数合并
*/
function MyHttp(defaultParams, API_LIST) {
let _build_url = HOST;
let resource = {};
for (let actionName in API_LIST) {
let _config = API_LIST[actionName];
resource[actionName] = (pdata) => {
let _params_data = pdata;
return apiRequest(_build_url + _config.url, _config.method, _params_data, {
'content-type': 'application/x-www-form-urlencoded;charset=utf-8;Authorization;'
});
}
}
return resource;
}
const Api = new MyHttp({}, API_LIST);
export default Api;
三、业务中使用
import Api from '/../../utils/api.js';
.
.
.
getAll() {
Api.all({ id: 1 }).then(res => {
console.log(res);
})
}
通过对小程序网络请求方法的二次封装,使得我们的代码看上去更加的简洁,在接口的管理上也相对的便利,比如在后端修改API的路径和方法时,只需要在api.js文件中修改相应的API即可,也免去了修改时忽略了更多调用的麻烦。同时,也提高了代码的复用性,一劳永逸。
————————————————
原文链接:https://blog.csdn.net/mingcodes/article/details/103582581
小程序封装request请求,统一API的更多相关文章
- 小程序封装request请求
//request.js var host = 'https://www.xxx.com';//请求域名 module.exports = function (type, params, method ...
- 监控微信小程序wx.request请求失败
在微信小程序里,与后台服务器交互的主要接口函数是wx.request(),用于发起 HTTPS 网络请求.其重要性不言而喻.然而,却经常遇到请求失败的问题,笔者特意谷歌"wx.request ...
- 关于微信小程序的Request请求错误处理
在学微信小程序的request请求的时候,一开始报“不在以下合法域名列表中,请参考文”的错误,后来又莫名其妙的报“400 Bad Request”错误,经过半天的研究,终于搞定了,把遇到的错误给大家分 ...
- 微信小程序wx.request请求用POST后台得不到传递数据
微信小程序的wx.request请求,method设为POST并向后台传递数据,但从后台返回的信息来看后台并没有获得传递的数据 wx.request({ url: 'url' ...
- 微信小程序- wx.request请求不到数据
小程序官方文档手册 https://mp.weixin.qq.com/debug/wxadoc/dev/ 小程序开发问答社区 http://www.henkuai.com/forum.php wx.r ...
- 微信小程序wx.request请求服务器json数据并渲染到页面
[原文出自]: https://blog.csdn.net/weixin_39927850/article/details/79766259 微信小程序的数据总不能写死吧,肯定是要结合数据库来做数据更 ...
- 小程序发送 request请求失败 提示不在合法域名列表中的解决方法
可以在小程序开发工具中设置不校验域名.
- 微信小程序测试request请求webapi
using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Ne ...
- 小程序 wx.request请求
1.wx.request相当于发送ajax请求 微信官方解释 参数 属性 类型 默认值 必填 说明 url string 是 开发者服务器接口地址 data string/object/ArrayBu ...
随机推荐
- Python一秒搭建ftp服务器,帮助你在局域网共享文件【华为云技术分享】
版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/devcloud/article/detai ...
- 华为云北京四业务,访问北京一OBS桶,配置指南
[摘要] 华为云跨数据中心,从北京四访问北京一的OBS桶里面的数据.免去数据迁移的麻烦 1 驱动力 跨region访问OBS桶里面的数据时.如果不走云连接,一个OBS桶域名对应的IP地址,是 ...
- Node升级——Node Binary管理模块"n"
Node.js的开发非常活跃,它的最新稳定版本也频繁变化,你不时会发现,一个模块不能在你当前的Node版本上使用,此时你需要升级Node 幸运的是,可以用一种非常简单的方法来管理你的Node版本,即使 ...
- EventSource 实时传输数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Spring Boot结合Mybatis
pom文件: <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http ...
- MongoDB第一天(MongoDB的简介和安装)
MongoDB 简介 什么是 MongoDB MongoDB 是一个基于分布式文件存储的数据库.由 C++语言编写.在为 WEB 应用提供可扩展的高性能数据存储解决方案. MongoDB 是一个介于关 ...
- seaborn 数据可视化(二)带有类别属性的数据可视化
Seaborn的分类图分为三类,将分类变量每个级别的每个观察结果显示出来,显示每个观察分布的抽象表示,以及应用统计估计显示的权重趋势和置信区间: 第一个包括函数swarmplot()和stripplo ...
- 搭建本地YUM仓库
YUM介绍 yum(yellow dog updater modified)为多个Linux发行版的软件包管理工具,Redhat RHEL CentOS Fedora YUM主要用于自动安装,升级rp ...
- 【重温基础】15.JS对象介绍
从这篇文章开始,复习 MDN 中级教程 的内容了,在初级教程中,我和大家分享了一些比较简单基础的知识点,并放在我的 [Cute-JavaScript]系列文章中. 关于[Cute-JavaScript ...
- 大数据学习笔记——HDFS理论知识之编辑日志与镜像文件
HDFS文件系统——编辑日志和镜像文件详细介绍 我们知道,启动Hadoop之后,在主节点下会产生Namenode,即名称节点进程,该节点的目录下会保存一份元数据,用来记录文件的索引,而在从节点上即Da ...