小程序公共封装ajax,微信小程序HTTP请求从0到1封装
前言
作为一个前端开发者,从最开始的js、jQuery一把梭,后来的vue、react、angular等MVVM、MVC框架,我们在开发工程中都离不开HTTP库的使用。
HTTP库
1、jQuery的$.ajax
调用了XMLHttpRequest对象,封装在相关函数在配置项中,一旦传入了必需选项,则直接调用相应的send()方法进行数据的请求
2、Axios
基于Promise的请求库,通过判断XMLHTTPRequest对象存在与否,来支持客户端和node服务端发送请求,封装的很不错的HTTP库,支持promise、拦截请求和响应等
小程序网络请求
wx.request({
url: 'test.php', //仅为示例,并非真实的接口地址
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
console.log(res.data)
}
})
小程序本身的请求已经封装的很不错了,使用起来和$.ajax相似,支持许多配置项的设置,但是缺少公共配置、响应和请求拦截等实用功能
第一步--创建请求实例
class Axios {
constructor() {
this.instance = null // 类的实例
this.config = defaultConfig
}
create(instanceConfig) {
const { config } = this
// 创建实例的时候添加基本配置
this.config = {
...config,
...instanceConfig
}
return this
}
// 单例
static getInstance() {
if (!this.instance) {
this.instance = new Axios()
}
return this.instance
}
}
创建实例
const axios = Axios.getInstance()
promise包装小程序请求
const dispatchRequest = function(config) {
return new Promise((resolve, reject) => {
wx.request({
...config,
url: config.base + config.url,
success: res => {
resolve(res)
},
fail: res => {
reject(res)
}
})
})
}
给请求实例添加request方法
request(options) {
const { config } = this
// 实例请求的时候添加基本配置
const requsetOptions = {
...config,
...options
}
return dispatchRequest(requsetOptions)
}
第二步--创建请求工具方法
创建实例,通过create设置基本配置项
const instance = (config = {}) => {
return axios.create({
base: globalApi,
...config
})
}
创建请求工具方法,执行实例request
export function request(options) {
const { baseConfig, url, method, data, isLogin } = options
instance(baseConfig)
.request({
url,
method: method || 'GET',
data
})
.then(res => {
options.success && options.success(res)
})
.catch(err => {
if (options.error) {
options.error(err)
} else {
errAlert()
}
})
}
}
这样,一个请求的工具方法就完成了,但是这个方法现在只支持基本的请求和基本配置项的配置,还是缺少我们很常用的公共请求和响应的拦截。
第三部--添加请求和响应的拦截器
创建拦截器实例
class InterceptorManager {
constructor() {
this.fulfilled = null
this.rejected = null
}
use(fulfilled, rejected) {
this.fulfilled = fulfilled
this.rejected = rejected
}
}
在请求实例的构造方法中添加请求和响应拦截实例
constructor() {
this.instance = null // 类的实例
this.config = defaultConfig
this.interceptors = {
request: new InterceptorManager(),
response: new InterceptorManager()
}
}
在实例的request添加promise执行队列
request(options) {
const { config, interceptors } = this
// 实例请求的时候添加基本配置
const requsetOptions = {
...config,
...options
}
const promiseArr = [] // promise存储队列
// 请求拦截器
promiseArr.push({
fulfilled: interceptors.request.fulfilled,
rejected: interceptors.request.rejected
})
// 请求
promiseArr.push({
fulfilled: dispatchRequest,
rejected: null
})
// 回调拦截器
promiseArr.push({
fulfilled: interceptors.response.fulfilled,
rejected: interceptors.response.rejected
})
let p = Promise.resolve(requsetOptions)
promiseArr.forEach(ele => {
p = p.then(ele['fulfilled'], ele['rejected'])
})
return p
}
在请求工具方法中通过设置请求和响应的拦截方法
axios.interceptors.request.use(
request => {
return request
},
err => {
console.error(err)
}
)
axios.interceptors.response.use(
response => {
return response
},
err => {
console.error(err)
}
)
在请求拦截方法里面可以添加数据转换,在请求头部添加sign、token等,在响应拦截方法里面去做公共的数据处理等
最后
从零搭建一个简单的请求库很简单,但是想考虑的方方面面,设计好整个流程会比较麻烦,需要不断的改进和重构,本文的搭架过程参考了Axios的部分源码。
好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对脚本之家的支持。
小程序公共封装ajax,微信小程序HTTP请求从0到1封装相关推荐
- 微信小程序request请求封装;微信小程序封装request请求;uni-app小程序封装request请求;
本片封装了微信小程序request请求:为别是post get put请求,重点在request.js文件 1.新增四个文件 2.根目录下的utils下的request.js封装uni.request ...
- h5是可以一键打包小程序的_H5手机网站封装打包微信小程序并实现分享及微信支付...
手机网站打包小程序教程,生成小程序,网页版小程序 打包微信小程序,H5封装成微信小程序. 微信小程序开发一般分为2种方式,一种就是原生开发小程序,一种是将手机网站打包成小程序. 原生开发小程序成本较 ...
- Html5手机端网址封装成微信小程序的教程
导读: 微信用户数早已超越10亿(中国使用微信的人已经超过80%),微信小程序也备受用户喜爱,如果你的网站已有H5手机端,可以将H5手机网站直接封装成微信小程序,除了不能使用微信支付功能外,其他类似分 ...
- app error login.php,GitHub - jmluang/weappLogin-for-laravel: 封装了微信小程序的登陆逻辑,包含了数据库操作...
laravel-weapp A weapp login logic Laravel warpper 本仓库从 wafer2开发套件 中提取并封装了微信小程序的登陆逻辑并转移到Laravel中,不仅降低 ...
- python开发微信小程序-Python 开发者的微信小程序开发实践
导读 在知乎上,有人提问"如何使用 Python 开发微信小程序". 其实微信小程序作为一个前端的机制,Python 并不能插上边.只不过可以作为后端接口为微信小程序提供数据服务而 ...
- mpvue微信小程序动画_mpvue 与微信小程序的火花
介绍 项目介绍 WeScale 定位为音乐训练小程序,初期规划了基础音阶的三个训练,以及他们的镜像模式. 数字简谱 字母简谱 数字简谱对字母简谱 后期看情况更新追加其他训练. 产品展示 扫描下方小程序 ...
- 微信小程序开发语言(微信小程序开发教程)详细步骤
微信小程序开发语言 开发微信小程序用什么语言 1.微信小程序开发所需要的语言比较特别,首先介绍一下需要使用到的文件类型大致分为:WXML(WeiXin Mark Language 微信标记语言).WX ...
- IT忍者神龟之小程序最全的微信小程序项目实例
想玩玩微信小程序的,可以下载个下面的一些demo看一看.(demo下载后,导入到"微信web开发者工具"便可以运行了,顺便把官方微信开发工具下载地址贴一下:下载 · 小程序)注:现 ...
- 微信小程序怎么取mysql,微信小程序怎么读取数据库?小程序如何读取数据?
微信小程序怎么读取数据库?小程序如何读取数据?各位微信用户们,如果你再开发微信小程序的过程中,需要微信小程序读取数据库的话,就跟着小编往下看微信小程序怎么读取数据库. 微信小程序怎么读取数据库? 微信 ...
最新文章
- Learn OpenGL (十):材质
- 利用cvMinAreaRect2求取轮廓最小外接矩形
- 开发日记-20190701 关键词 读书笔记《Linux 系统管理技术手册(第二版)》DAY 7
- ContentProviderOperation批量操作提升性能
- back在java里面是什么意思,手机APP中使用history.back()的问题
- LeetCode 1114 按序打印
- Session在类库中的使用
- 弱投影模型_通过投影增强数据模型
- 【硬核科技】转行AI,从零出发
- SAP License:自动过账科目设置
- 案例-旋转木马(CSS3)
- java中间==、equals和hashCode差额
- docker镜像的使用及相关
- 训练集和测试集的区别
- ArcGIS批量按要素裁剪(应用模型)
- 最新oss对象储存防红直连 防红代码html静态页面
- 苹果支付验单java
- javascript_video_2
- IDEA使用AVD Manager创建AVD
- warning: function returns address of local variable(函数参数返回错误)