微信小程序如何封装常用的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,
/* 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（）
以上就是关于"微信小程序如何封装常用的API接口请求及工具类"这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注行业资讯频道。
