微信小程序如何封装常用的API接口请求及工具类

这篇“微信小程序如何封装常用的api接口请求及工具类”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“微信小程序如何封装常用的API接口请求及工具类”文章吧。

工具类封装：

// 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,

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（）  

以上就是关于“微信小程序如何封装常用的API接口请求及工具类”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网html频道。