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