微信小程序开发中如何封装HTTP请求方法

发布时间:2022-03-23 10:00:17 作者:小新
来源:亿速云 阅读:544

这篇文章主要介绍微信小程序开发中如何封装HTTP请求方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

HTTP请求方法的封装

在小程序中http请求是很频繁的,但每次都打出wx.request是很烦的,而且代码也是冗余的,所以我们要把他封装起来
首先要在utils文件夹中新建一个js,我命名为request.js,在里面封装出post和get的请求,记得最后要声明出来

//封装请求
const app = getApp()
let host = app.globalData.url

/**
 * POST 请求
 * model:{
 * url:接口
 * postData:参数 {}
 * doSuccess:成功的回调
 *  doFail:失败回调
 * }
 */
function postRequest(model) {
 wx.request({
  url: host + model.url,
  header: {
   "Content-Type": "application/x-www-form-urlencoded"
  },
  method: "POST",
  data: model.data,
  success: (res) => {
   model.success(res.data)
  },
  fail: (res) => {
   model.fail(res.data)
  }
 })
}

/**
 * GET 请求
 * model:{
 *  url:接口
 *  getData:参数 {}
 *  doSuccess:成功的回调
 *  doFail:失败回调
 * }
 */
function getRequest(model) {
 wx.request({
  url: host + model.url,
  data: model.data,
  success: (res) => {
   model.success(res.data)
  },
  fail: (res) => {
   model.fail(res.data)
  }
 })
}

/**
 * module.exports用来导出代码
 * js中通过 let call = require("../util/request.js") 加载
 */
module.exports = {
 postRequest: postRequest,
 getRequest: getRequest
}

这一步非常重要记得添加!

module.exports = {
postRequest: postRequest,
getRequest: getRequest
}

使用时就在相应的页面顶部调用,Page外部噢

let call = require("../../utils/request.js")

使用的时候↓

get

//获取广告图
  call.getRequest({
   url:'GetAd',
   success:(res)=>{   //箭头函数没有指针问题
    this.setData({
     urlItem: res.data
    })
   }
  })

post

call.postRequest({
   url: 'addorder',
   data: {
    shop_id: that.data.shop_id,
    user_id: app.globalData.user_id,
    coupon_sn: that.data.coupon_sn,
    carType: that.data.car_type,
    appointtime: that.data.toTime
   },
   success:(res)=>{
    console.log(res)
    wx.navigateTo({
     url: '../selectPay/selectPay?order_sn=' + res.data.order_sn + '&fee=' + res.data.real_pay + "&order_id=" + res.data.order_id,
    })
   }
  })

以上是“微信小程序开发中如何封装HTTP请求方法”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!

推荐阅读:
  1. 微信小程序HTTP接口请求封装代码实例
  2. 微信小程序HTTP接口请求封装的实现

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

微信小程序 http

上一篇:微信小程序开发中如何使用箭头函数

下一篇:微信小程序开发中如何实现搜索按钮

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》