如何封装⼩程序请求

最新推荐文章于 2024-06-04 14:12:16 发布

原创最新推荐文章于 2024-06-04 14:12:16 发布 · 109 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue #javascript

本文档详细介绍了如何在小程序中封装wx.request方法，包括POST、GET等常见HTTP请求，并展示了如何在组件中调用这些封装好的请求进行数据交互。通过创建api.js文件并导出请求方法，可以方便地在小程序各个模块中复用请求逻辑。

如何封装⼩程序请求

封装 wx.request 请求传递需要的参数( url , data , method , success 成功回调， fail 失败回调 ) , 封装常⽤⽅法 POST , GET , DELETE , PUT … 最后导出这些⽅法
然后新建⼀个 api.js ⽂件，导⼊封装好的⽅法，然后调取相应的⽅法，传递数据。
wx.request 封装

var app = getApp(); //获取⼩程序全局唯⼀app实例
var host = '******************'; //接⼝地址
//POST请求
function post(url, data, success,fail) {
 request(url, postData, "POST", doSuccess, doFail);
}
//GET请求
function get(url, data, success, fail) {
 request(url, postData, "GET", doSuccess, doFail);
}
function request(url, data, method, success, fail) {
 wx.showLoading({
 title: "正在加载中...",
 })
 wx.request({
 url: host + url, //请求地址
 method: method, //请求⽅法
 header: { //请求头
 "Content-Type": "application/json;charset=UTF-8"
 },
 data: data, //请求参数
 dataType: 'json', //返回数据格式
 responseType: 'text', //响应的数据类型
 success: function(res) {
 wx.hideLoading();
 //成功执⾏⽅法，参数值为res.data,直接将返回的数据传⼊
 success(res.data);
 },
 fail: function() {
 //失败执⾏⽅法
 fail();
 },
 })
}
module.exports = {
 postRequest: post,
 getRequest: get, }

组件使⽤封装好的请求


var http = require('../../utils/request.js'); //相对路径
var params = {//请求参数
 id:this.data.userId
}
http.postRequest("user/delUser", params, function(res) {
 console.log("修改成功！");
 
}, function(res) {
 console.log("修改失败！！！")
})