微信小程序之封装常用的API接口请求以及工具类方法

Posted 2022-12-05 coderkey

工具类封装：

// utils.js

// 显示消息提示框
export function Toast(title,type,time,isshow)
  wx.showToast(
    title: title,
    icon: type,
    duration: time,
    mask: isshow  
  )


// 显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框
export function Loading(title)
  wx.showLoading(
    title: title,    
  )  


// 显示模态对话框
export function Modal(title,content) 
  return new Promise((resolve,reject)=>
    wx.showModal(
      title: title,
      content: content,
       success: function(res) 
        if(res.confirm) 
          resolve(res.confirm)
         else if(res.cancel) 
          resolve(res.cancel)
        
      ,
      fail: reject
    )
  )  

---

接口request请求的封装：

新建一个network文件夹，里面包含api.js request.js config.js 三个文件（根据自己需求来）

// config.js

// 开发环境url 
export const dev = 
   baseUrl: "http://192.168.0.1:8080/jeecg-boot",
;
// 测试环境url
export const test = 
  baseUrl: "http://www.xxx.com"
;
// 线上环境url
export const prod = 
  baseUrl: 'https://www.xxx.com'
;

---

// 封装实例

// request.js

// 引入二次封装的组件
import 
  Toast,
  Loading,
  Modal
 from './utils.js'

// 引入config中的url(后面点什么就是 什么环境)
 const 
  baseUrl
 = require('./config').dev  //这里用的是ES6的写法

module.exports = 
  // 二次封装wx.request
  request: (url, method, data) => 
    //url： 为网络接口后面要拼接的动态路径
    //method: 为请求方式
    //data: 为要传递的参数 object类型
     let _url = `$baseUrl/$url` //子域名按需添加
    // let _url = `$baseUrl$son/$url`

         //设置请求头
      var header = 'content-type': 'application/json'
      
      //检查缓存中有没有token
      var token = wx.getStorageSync('token')
      if(token != '') 
        //  header.Authorization = token;
        header['X-Access-Token'] = token;   // 键由后端定义
      
    return new Promise((resolve, reject) => 
      Loading('正在加载中')
      wx.request(
        url: _url,
        data: data,
        method: method,
        header: header,
       /* success: (res) => 
           if (res.data.code == 200) 
             resolve(res)
             wx.hideLoading();
            else 
             Toast('数据请求错误', 'error', 1000)
            //  console.log('操作失误：',res);
             wx.hideLoading();
           
        ,
        fail: (err) => 
          reject(err)
         */
		 complete: (res) =>      //根据公司业务需求做出调整
                wx.hideLoading()
                if(res.statusCode==200)
                    if(res.data.status)
                        resolve(res.data.data)
                    else
                        Toast(res.data.msg)
                        reject(res.data.data)
                    
                else if (res.statusCode === 401)  
                    //没有登录转跳到登录页面
                    wx.reLaunch(
                        url: '/pages/login/index'
                    )
                else   
                    Toast('请求失败,请稍后重试');
                
            
      )
    )
  

---

API统一封装接口

// api.js
// 导入封装好的实例
import request from './request'

export function login(data) => 
    return request('/appletslogin/appletsLogin/login', 'post', data);
  ,

---

页面使用

// 导入封装好的接口
import login from './network/api'
// 调用 
login().then().catch()  

---

注意：封装的方式多种多样，只要满足需求就行，主要还是要学会如何封装，怎么封装才是关键！
各位小伙伴，再接再励，希望这篇文章对大家有点小收获…