Shulou(Shulou.com)06/01 Report--

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

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.