当前位置:   article > 正文

微信小程序网络请求封装API集中管理

微信小程序网络请求封装API集中管理

common/api目录下创建两个js文件 { apiList.js,api.js }

API列表 

  1. // common/api/apiList.js
  2. const BASE_URL = 'https://api.example.com'; // 定义 API 的基础域名
  3. const apiList = {
  4. getData: BASE_URL + '/data',
  5. postData: BASE_URL + '/postData',
  6. // 其他接口路径...
  7. };
  8. module.exports = apiList;

请求封装

  1. // common/api/api.js
  2. const apiList = require('./apiList.js');
  3. const request = (url, method, data) => {
  4. return new Promise((resolve, reject) => {
  5. wx.request({
  6. url: apiList[url], // 使用apiList中的接口路径
  7. method: method,
  8. data: data,
  9. header: {
  10. 'content-type': 'application/json'
  11. },
  12. success(res) {
  13. resolve(res.data);
  14. },
  15. fail(err) {
  16. reject(err);
  17. }
  18. })
  19. })
  20. }
  21. module.exports = {
  22. request: request
  23. };

 使用

  1. // 在需要发送请求的页面或组件中引入api.js
  2. const api = require('../../common/api/api.js');
  3. // 使用封装的请求函数,传入对应的apiList中的接口名称即可
  4. api.request('getData', 'GET', { key: value }).then(res => {
  5. console.log(res);
  6. // 请求成功的处理逻辑
  7. }).catch(err => {
  8. console.log(err);
  9. // 请求失败的处理逻辑
  10. });

 封装完毕 !

每次发起请求时带上 Code

  1. const apiList = require('./apiList.js');
  2. // 定义一个函数来获取用户的code
  3. const getUserCode = () => {
  4. return new Promise((resolve, reject) => {
  5. wx.login({
  6. success: function (res) {
  7. if (res.code) {
  8. resolve(res.code);
  9. } else {
  10. reject('获取用户code失败');
  11. }
  12. },
  13. fail: function (err) {
  14. reject(err);
  15. }
  16. });
  17. });
  18. };
  19. // 修改网络请求函数,在调用时获取用户的code并携带在请求的header中
  20. const request = (url, method, data) => {
  21. return getUserCode().then(code => {
  22. return new Promise((resolve, reject) => {
  23. wx.request({
  24. url: apiList[url], // 使用apiList中的接口路径
  25. method: method,
  26. data: data,
  27. header: {
  28. 'content-type': 'application/json',
  29. 'X-WX-Code': code // 将code添加到请求的header中
  30. },
  31. success(res) {
  32. resolve(res.data);
  33. },
  34. fail(err) {
  35. reject(err);
  36. }
  37. })
  38. });
  39. });
  40. };
  41. module.exports = {
  42. request: request
  43. };

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

闽ICP备14008679号