当前位置:网站首页>如何封装微信小程序的 wx.request() 请求
如何封装微信小程序的 wx.request() 请求
2022-08-02 10:01:00 【王——小喵】
先对 wx.request() 进行基本的请求封装,再继续封装 post 和 get 请求
//在utils/http.js文件中
/**
* 请求相关的封装
*/
let baseUrl = "http://xxx.xxx.xx.xx:xx/"; // 接口地址
let header = {
'content-type': 'application/x-www-form-urlencoded',
'Authorization': wx.getStorageSync("token")?wx.getStorageSync("token"):''
}
/**
* 封装请求
*/
function fetch(options) {
if (options.loading) {
wx.showLoading({
title: '加载中',
mask: true
})
}
return new Promise((resolve, reject) => {
wx.request({
url: baseUrl + options.url,
data: options.data,
header: header,
method: options.method,
success: function(res) {
if (options.loading) {
wx.hideLoading()
}
if (res.data.status != 0) { //根据自己的接口返回值进行判断
// 重新登陆
return false;
}
resolve(res.data); //把请求到的数据发到引用请求的地方
},
fail: function(err) {
if (options.loading) {
wx.hideLoading()
}
wx.showToast({
title: "网络连接超时",
icon: 'none',
duration: 3000,
})
}
})
})
}
/**
* POST 请求
*/
export function post(url, params, loading = true) {
var option = {
url: url,
data: params,
method: 'POST',
loading
}
return fetch(option);
}
/**
* GET请求
*/
export function get(urls, params, loading = true) {
var option = {
url: urls,
data: params,
method: 'GET',
loading
}
return fetch(option);
}
使用
//先通过模块化引入
const util = require('../../utils/util.js')
//get请求
http.get('getuserInfo', params).then((res) =>{
console.log(res)
})
//post请求
http.post('findDepartment', params).then( (res) =>{
console.log(res);
})
//也可以使用 async 和 await,比如
async formSubmit(e) {
let params = {
name:e.detail.value.name
passward:e.detail.value.passward
}
//let params = e.detail.value
const res = await http.post('login',params)
if(res.status===0){
//将token和用户信息存到本地
wx.setStorageSync('token', res.token);
wx.setStorageSync('userinfo', res.userinfo);
wx.showToast({
title: res.message,
icon: 'none',
duration: 3000
});
}
}
边栏推荐
猜你喜欢
The k-nearest neighbor method in the notes of Li Hang's "Statistical Learning Methods"
Shell脚本实现多选DNS同时批量解析域名IP地址(新更新)
链表的实现
一文带你了解推荐系统常用模型及框架
leetcode 62. Unique Paths(独特的路径)
yolov7创新点
Rear tube implements breadcrumb function
DVWA Clearance Log 2 - Command Injection
iNFTnews | 看见元宇宙的两面,何谓全真互联网和价值互联网?
阿里巴巴 CTO 程立:开源是基础软件的源头!
随机推荐
全新荣威RX5,27寸大屏吸引人,安全、舒适一个不落
一款优秀的中文识别库——ocr
食品安全 | 鱼肝油不是鱼油,家有宝宝的注意了
神通数据库,批量插入数据的时候失败
李航《统计学习方法》笔记之感知机perceptron
R language ggplot2 visualization: use the ggtexttable function of the ggpubr package to visualize tabular data (directly draw tabular graphs or add tabular data to images), use tbody_add_border to add
The love-hate relationship between C language volatile keyword, inline assembly volatile and compiler
程序员的浪漫七夕
Navicat连接MySQL时弹出:1045:Access denied for user ‘root’@’localhost’
一文带你了解推荐系统常用模型及框架
You Only Hypothesize Once: 用旋转等变描述子估计变换做点云配准(已开源)
Mistakes in Brushing the Questions 1-Implicit Conversion and Loss of Precision
typeinfo类型支持库学习
npm ERR! 400 Bad Request - PUT xxx - Cannot publish over previously published version “1.0.0“.
Supervised learning of Li Hang's "Statistical Learning Methods" Notes
R语言时间序列数据算术运算:使用log函数将时间序列数据的数值对数化、使用diff函数计算对数化后的时间序列数据的逐次差分(计算价格的对数差分)
iNFTnews | Seeing the two sides of the metaverse, what is the true Internet and the Internet of value?
R语言使用ggpubr包的ggtexttable函数可视化表格数据(直接绘制表格图或者在图像中添加表格数据)、设置theme主题参数自定义表格中表头内容的填充色(使用colnames.style参数)
npm ERR! 400 Bad Request - PUT xxx - Cannot publish over previously published version “1.0.0“.
php组件漏洞