微信小程序封装接口

基本逻辑如下：

1. 设置请求地址
2. 封装request.js，进行请求并返回数据或返回错误（关键步骤）
3. 编写接口
4. 接口调用

1.根目录下，分别创建http和api两个文件夹（名字可以自己随意起，只要保证引用正确即可），如下图

2.在http文件夹下创建env.js和request.js，如果只有一个请求地址，也无需使用env.js，

第一步：env.js代码截图如下

代码如下：

module.exports = {
  // 开发环境
  dev:{
    baseUrl:'127.0.0.1'
  },
  // 正式环境
  prod:{
    baseUrl:'http://127.0.0.1/api/project/'
  }
}   

 

第二步：request.js，注释如下图

request.js代码如下：

const { baseUrl } = require('./env').prod
module.exports = {
  request : function(url, method = 'GET', data = {}){
    let fullUrl = `${baseUrl}${url}`
    let token = wx.getStorageSync('token') ? wx.getStorageSync('token')  : ''
    return new Promise((resolve,reject)=>{
      wx.request({
        url: fullUrl,
        method,
        data,
        header: {
          'content-type': 'application/json', // 默认值
          'x-api-key': token,
        },
        success(res){
          if (res.data.code == 200) {
            resolve(res.data)
          }else{
            wx.showToast({
              title: res.data.msg,
              icon:'none'
            })
            reject(res.data.message)
          }
        },
        fail(){
          wx.showToast({
            title: '接口请求错误',
            icon:'none'
          })
          reject('接口请求错误')
        }
      })
    })
  }
}

3.在api目录下面，创建自己的接口，例如login.js，示例图下：

login.js代码如下：请求方式，GET/POST/PUT/DELETE等

const {
  request
} = require('../http/request.js')
module.exports = {
  // 登录
  login: (params) => request('user/login', 'GET', params),
  // 注册
  register: (params) => request('user/register', 'GET', params),
  // 获取验证码
  getCode: (params) => request('user/code', 'GET', params)
}

 

4.相应页面，调用接口页面：

第一步：在顶部引入接口，如下图

第二步：调用，如下图，参数根据自己情况修改即可

5.qq交流：3396475100