小程序封装 wx.request技巧与使用
2023-09-11 14:19:18 时间
小程序开发,避不开 wx.request请求。为了提高我们的工作效率,我们对 他进行封装,使代码更加优雅,易读
1 先了解官方的文档
1.1重要参数
- url 请求地址
- method 请求方式(目前关注 Get/Post)
- data 请求的参数
- header 请求头(常用放token之类)
- success 接口调用成功的回调函数
- fail 接口调用失败的回调函数
1.2 重要例子
wx.request({
url: 'example.php', //仅为示例,并非真实的接口地址
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
console.log(res.data)
}
})
2 开始封装
const request = (url, options) => { 内容... } //第1种
const request = function(url, options) {内容...} //第2种
return new Promise(function (resolve, reject) { 内容... }) //第1种
return new Promise((resolve, reject)=> { 内容...}) //第2种
新建 request.js 目前就放在 utils 文件夹里面
/**
* request.js 封装一个Pominse风格的同样请求
* url 请求地址
* options 包含请求方式method,请求参数的配置对象data
*/
var app = getApp(); //引入全局变量
const request = function(url, options) {
return new Promise((resolve, reject)=> {
wx.request({
url: app.globalData.baseUrl + url,
method: options.method,
data: options.data,
header: {
'token': app.globalData.token
},
success: (res) => { //请求成功
if (res.data.code == 200) { //成功
resolve(res.data.result);
} else { //失败
wx.hideLoading();//隐藏加载提示
wx.showModal({
title: '失败',
cancelColor: res.data.msg,
showCancel: false
})
reject(res.data.msg);
}
},
fail: (err) => {//请求失败
reject(err);
}
})
})
}
module.exports = {
//封装GET方法
get(url,data){
return request(url,{method:"GET",data})
},
//封装POST方法
post(url,data){
return request(url,{method:"POST",data})
}
}
封装成功
3 使用
为了 方便 我们在 app.js引入方法
const request = require("./utils/request.js") //引入封装好的js文件
module.exports = {
login(data){ // 登录
return request.post('/learn/auth/login',data)
}
}
然后在具体 页面使用
const api = require("../../api") //引入同意管理的接口js
后面补充
/**
* request.js 封装一个Pominse风格的同样请求
* url 请求地址
* options 请求参数的配置对象data
*/
var app = getApp(); //引入全局变量
const request = function(url, data) {
return new Promise((resolve, reject)=> {
wx.request({
url: app.globalData.baseUrl+url,
data: data,
// header: {
// 'token': app.globalData.token
// },
success: (res) => { //请求成功
if (res.data.code == 200) { //成功
resolve(res.data.result);
} else { //失败
wx.hideLoading();//隐藏加载提示
wx.showModal({
title: '失败',
cancelColor: res.data.msg,
showCancel: false
})
}
resolve(res);
},
fail: (err) => {//请求失败
reject(err);
}
})
})
}
module.exports = request;
使用
引入
const request = require('../../utils/request')
handeProblem:function () {
let data1={'number':'YT9867899067833'};
let url='express/queryYTO';
request(url,data1)
.then(res=>{
console.log('调用成功',res);
})
.catch(err=>{
console.log('调用失败',err)
})
},
相关文章
- 微信小程序-封装请求(GET、POST)
- .Net基础——程序集与CIL HttpClient封装方法 .Net Core 编码规范 C#中invoke和beginInvoke的使用 WebServeice 动态代理类
- native-echarts 组件封装
- AiP封装天线的过孔分析
- 微信小程序 - 函数防抖 / 函数节流(轮子封装)
- uni-app - 在纯 JS 文件中调用自定义弹框组件 / 封装全局 API 调用弹框组件(解决小程序、APP 无法使用 document.body.appendChild 插入组件节点)适配全端
- axios的封装,响应拦截器的实例
- promise封装
- 微信小程序class封装http
- 微信小程序前端promise封装
- 微信小程序前端function封装
- 使用cjson进行对象的嵌套封装
- 如何封装第三方API
- 手把手教你封装属于自己的分段滚动视图(下)
- 小程序封装request请求
- 微信小程序原生开发功能合集十:分步组件的封装
- 微信小程序原生开发功能合集四:复选框组件的封装
- vue封装一个左滑删除的组件
- 将summernote在vue项目中封装成组件
- QinQ封装及终结详解
- 微信小程序使用flyio封装request请求
- NoHttp封装--02 自定义请求
- 【AD小知识】QFP/TQFP/LQFP封装比较学习
- Unity Android 之 应用打开手机的指定网页浏览器(external browser)的两种方法(封装aar和不用封装aar方法)
- 超简单几行代码集成Fragment通信框架,封装四个接口覆盖所有的方法带参和返回值情况,实现万能接口通用,在Activity中复写自己方法的逻辑代码即可
- 微信小程序 封装接口
- 基于OpenCV封装官方Affine-SIFT源码