微信小程序封装接口

我就是我 2022-11-05 06:22 266阅读 0赞

1.  封装公共的请求类  
    utils文件夹下创建request.js文件

// request.js
    const timeout = 1000 * 12; // 请求超时时间
    
    let request = { };
    // post請求
    request.post = (url, data) => { 
      return new Promise((resolve, reject) => { 
        wx.request({ 
          url,
          data,
          header: { 
            'content-type': 'application/x-www-form-urlencoded'
          },
          timeout,
          method: 'POST',
          complete: (res) => { 
            if (res.statusCode >= 200 && res.statusCode < 300) { 
              resolve(res.data)
            } else { 
              reject(res)
            }
          }
        })
      })
    }
    // get請求
    request.get = (url, data) => { 
      return new Promise((resolve, reject) => { 
        wx.request({ 
          url,
          data,
          timeout,
          complete: (res) => { 
            if (res.statusCode >= 200 && res.statusCode < 300) { 
              resolve(res.data)
            } else { 
              reject(res)
            }
          }
        })
      })
    }
    
    module.exports = request;

1.  包装公共接口路径  
    根目录下创建api文件夹，在该文件夹下创建base.js文件  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTMxNjk5_size_16_color_FFFFFF_t_70]

// base.js
    // 域名接口管理
    const env = wx.getAccountInfoSync().miniProgram.envVersion; // 获取小程序版本
    const base = { 
      sq: env === 'develop' ? '开发环境接口公共路径' : env === 'trial' ? '体验环境接口公共路径' : '正式环境接口公共路径'
    }
    
    module.exports = base;

1.  封装各模块接口  
    比如和用户相关操作的接口，在api文件夹下创建user.js文件  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTMxNjk5_size_16_color_FFFFFF_t_70 1]

// user.js
    let base = require('./base'); // 导入接口域名列表
    let request = require('../utils/request'); // 导入request中创建的请求实例
    const user = { 
      // 用户登录
      login(data) { 
        return request.post(`${ base.sq}/index/Login/user`, data);
      },
      // ...其他接口
    }
    module.exports = user

若是get请求

// get请求
    detail(data) { 
     return request.get(`${ base.sq}/index/protocol/detail`, data);
    }

1.  创建api接口的统一出口  
    在api文件夹下创建index.js文件  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTMxNjk5_size_16_color_FFFFFF_t_70 2]

// api接口的统一出口
    const user = require('./user');
    const protocol = require('./protocol');
    // 其他模块的接口...
    
    // 导出接口
    module.exports = { 
      user,
      protocol,
      //...
    }

1.  挂载到app.js上，使得全局都可用api

// api.js
    let api = require('./api/index');
    App({ 
      api
    })

1.  使用封装好的接口

// 获取应用实例
    const app = getApp();
    
    app.api.user.login({ phone: '15966664444'}).then(res => { 
     console.log(res);
    })
    app.api.protocol.detail({ type: 1}).then(res => { 
      console.log(res);
    })

1.  其他  
    如果https域名还未申请下来只能用http的，可以把不检验合法域名勾上。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTMxNjk5_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTMxNjk5_size_16_color_FFFFFF_t_70]: /images/20221023/85b534aa91c94cf696f9f8c46f341680.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTMxNjk5_size_16_color_FFFFFF_t_70 1]: /images/20221023/6b076a18cb8141e88637f74525b1cdd3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTMxNjk5_size_16_color_FFFFFF_t_70 2]: /images/20221023/384c5771599448b5bdc758cc0ca82a0a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTMxNjk5_size_16_color_FFFFFF_t_70 3]: /images/20221023/c5c08d0ccc0e40cfb811572393986324.png