当前位置:   article > 正文

微信小程序请求接口封装

微信小程序请求接口封装

1、新建封装请求 api/request.js

  1. // 配置的域名
  2. const baseUrl = "xxxxxxxxxxxxxx" // 请求公共接口
  3. // 封装请求
  4. module.exports = {
  5. /**
  6. * 二次封装wx.request
  7. * url:请求的接口地址
  8. * method:请求方式 GET,POST....
  9. * data:要传递的参数
  10. */
  11. request: (url, method, data) => {
  12. return new Promise((resolve, reject) => {
  13. wx.showLoading({
  14. title: '加载中',
  15. });
  16. wx.request({
  17. url: `${baseUrl}${url}`,
  18. data: data,
  19. method: method,
  20. header: {
  21. 'content-type': (method == 'GET') ? 'application/x-www-form-urlencoded' :
  22. 'application/json',
  23. 'Cookie': wx.getStorageSync('Cookie') || ''
  24. },
  25. success: (res) => {
  26. if (res.statusCode == 200 && res.cookies && res.cookies[0]) { // 获取token
  27. resolve(res);
  28. } else if (res.statusCode == 200 && res.data.code == 200) { // 成功返回值
  29. resolve(res.data.data);
  30. } else if (res.statusCode == 200 && res.data.code != 200) { // 错误时提示
  31. wx.showToast({
  32. title: res.data.message,
  33. icon: 'none'
  34. });
  35. }
  36. },
  37. fail: () => {
  38. reject('数据错误')
  39. },
  40. complete: () => {
  41. setTimeout(() => {
  42. wx.hideLoading();
  43. }, 100);
  44. },
  45. });
  46. });
  47. },
  48. }

2、封装所有请求 api/http.js

  1. //引入封装的reuest请求
  2. const {
  3. request
  4. } = require('./request.js')
  5. //基于业务封装的接口
  6. module.exports = {
  7. // 登录
  8. getLogin: (data) => {
  9. return request('/***/***/***/login', 'POST', data);
  10. },
  11. // 获取商品信息
  12. getGoodsDetails: (data) => {
  13. return request('/***/***/***/goodsDetails', 'GET', data);
  14. },
  15. }

3、引入请求并使用 login.js

  1. // 引入登录接口
  2. const {
  3. login
  4. } = require('../../api/http.js')
  5. Page({
  6. data: {
  7. username: '',
  8. pwd: ''
  9. },
  10. onLoad() {
  11. let params = {
  12. username: this.data.username,
  13. pwd: this.data.pwd
  14. }
  15. // 登录
  16. login(params).then(res => {
  17. wx.setStorageSync('Cookie', res.cookies[0])
  18. wx.switchTab({
  19. url: '../index/index'
  20. })
  21. })
  22. },
  23. // 退出登录
  24. handleLogOut() {
  25. wx.clearStorageSync()
  26. wx.navigateTo({
  27. url: '../login/login'
  28. })
  29. },
  30. })

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/凡人多烦事01/article/detail/677697
推荐阅读
相关标签
  

闽ICP备14008679号