小程序接口的封装

项目根目录新建文件夹

本文新建文件夹为http

封装开发环境文件

在http文件夹中新建文件env.js

module.exports={
 //开发环境
 dev:{
   baseUrl:'http://192.168.0.11:8088'
 },
 //生产环境
 prod:{
   baseUrl:'https://**********.com/'
 },
 //测试环境
 test:{
   baseUrl:'https://**********.com/'
 }
}

封装ajax

在http文件夹中新建文件request.js

具体配置可根据自己项目进行调整

// 引入开发环境
const { baseUrl } = require('./env.js').dev

// 封装ajax
module.exports = {
 request: function (url, method = "GET", data = {}) {
   let fullUrl = ${baseUrl}/${url};
   console.log('method',method,'data',data);
   wx.showLoading({
     title: '加载中',
   })
   return new Promise((resolve, reject) => {
     wx.request({
       url: fullUrl,
       method,
       data,
       header: {
         'Content-type': 'application/x-www-form-urlencoded'
       },
       success(res) {
         console.log('res::',res)
         if (res.statusCode === 200 && res.data.length != 0 || res.data != '') {
           resolve(res.data)
           wx.hideLoading()
         } else {
           wx.showToast({
             title: '接口有问题，请检查',
             icon: "none"
           })
           reject('接口有问题，请检查1')
         }
       },
       fail(error) {
         wx.showToast({
           title: '数据接口有问题',
         })
         reject('数据接口有问题' + error)
       }
     })
   })
 }
}

封装接口文件

在http文件夹中新建文件api.js

// 引入封装好的ajax
const { request } = require('./request.js');

// 封装项目中用到的各种接口
module.exports = {
 // wx登录接口
 login: (data) => {
   return request('signup/login', 'POST', data,)
 },
 // 查找接口
 find: (data) => {
   return request('register/find', 'POST', data)
 },
 // 表单提交
 forms: (data) => {
   return request('register/register', 'POST', data)
 },
 // 更新接口
 update: (data) => {
   return request('register/update', 'POST', data)
 }
}

使用

首先需要在项目中引入封装好的接口

const { login, find, forms } = require('../../http/api.js')  // 根据需求引入接口

接着直接调用该接口即可

login(res).then(rs => {
   console.log(rs)
})

find(res).then(rs => {
   console.log(rs)
})

forms(res).then(rs => {
   console.log(rs)
})