全国各大网站,开发免费app,佛山百度快速排名优化,进贤网站建设文章目录 微信小程序-封装通用模块封装toast和modal封装storage封装网络请求 微信小程序-封装通用模块
封装toast和modal
/** 提示消息框 */
function toast({title 数据加载中,icon none,duration 2000,mask true,
}) {wx.showToast({title,ico… 文章目录 微信小程序-封装通用模块封装toast和modal封装storage封装网络请求 微信小程序-封装通用模块
封装toast和modal
/** 提示消息框 */
function toast({title 数据加载中,icon none,duration 2000,mask true,
}) {wx.showToast({title,icon,duration,mask,})
}/** 模拟对话框 */
function modal(opts {}) {const defaultOpts {title: 提示,content: 您确定执行该操作吗,confirmColor: #f3514f,}return new Promise((resolve) {const options Object.assign({}, defaultOpts, opts)wx.showModal({...options,complete({ confirm, cancel }) {confirm resolve(true)cancel resolve(false)},})})
}// 挂载到 wx 全局对象上
wx.toast toast
wx.modal modalexport { toast, modal }封装storage
/** 同步存储数据 */
export const setStorage (key, data) {try {wx.setStorageSync(key, data)} catch (e) {console.error(存储指定 ${key} 数据时发生了异常, e)}
}/** 同步获取数据 */
export const getStorage (key) {try {const value wx.getStorageSync(key)if (value) {return value}} catch (e) {console.error(获取指定 ${key} 数据时发生了异常, e)}
}/** 同步删除指定数据 */
export const removeStorage (key) {try {wx.removeStorageSync(key)} catch (e) {console.error(移除指定 ${key} 数据时发生了异常, e)}
}/** 同步清空全部数据 */
export const clearStorage () {try {wx.clearStorageSync()} catch (e) {console.error(清空数据发生了异常, e)}
}/** 异步存储数据 */
export const asyncSetStorage (key, data) {return new Promise((resolve) {wx.setStorage({key,data,complete(res) {resolve(res)},})})
}/** 异步获取指定数据 */
export const asyncGetStorage (key) {return new Promise((resolve) {wx.getStorage({key,complete(res) {resolve(res)},})})
}/** 异步删除指定数据 */
export const asyncRemoveStorage (key) {return new Promise((resolve) {wx.removeStorage({key,complete(res) {resolve(res)},})})
}/** 异步清空全部数据 */
export const asyncClearStorage () {return new Promise((resolve) {wx.clearStorage({key,complete(res) {resolve(res)},})})
}封装网络请求
request.js
class WxRequest {/** 默认请求参数 */defaultOpts {baseURL: https://gmall-prod.atguigu.cn/mall-api, //域名url: , // 请求路径data: null, // 请求参数method: GET, // 请求方法header: {// 请求头Content-type: application/json,},timeout: 60000, // 超时时间isLoading: true, // 是否显示loading}/** 拦截器 */interceptors {// 请求拦截器发送请求前可以对请求参数进行更改request: (config) config,// 响应拦截器服务器响应后可以对数据进行逻辑处理response: (response) response,}/** 数组存放请求标识 */queue []constructor(options {}) {this.defaultOpts Object.assign({}, this.defaultOpts, options)}request(options) {this.timeId clearTimeout(this.timeId)options.url this.defaultOpts.baseURL options.urloptions { ...this.defaultOpts, ...options }// 使用请求拦截器options this.interceptors.request(options)// 如果数组为空则显示loadingif (options.isLoading) {this.queue.length 0 this.showLoading()this.queue.push(request)}return new Promise((resolve, reject) {wx.request({...options,success: (res) {console.log(success, res)if (res.statusCode 200) {// 第一个参数目标对象第二个参数服务器响应数据第三个参数请求配置const mergeRes Object.assign({}, res, {config: options,isSuccess: true,})resolve(this.interceptors.response(mergeRes))} else {wx.showToast({title: 服务器异常,icon: error,})}},fail: (err) {console.log(fail, err)const mergeErr Object.assign({}, err, {config: options,isSuccess: false,})reject(this.interceptors.response(mergeErr))},complete: () {if (options.isLoading) {this.queue.pop()this.queue.length 0 this.queue.push(request)this.timeId setTimeout(() {this.queue.pop()this.queue.length 0 this.hideLoading()clearTimeout(this.timeId)}, 1)}},})})}/** 封装GET请求 */get(url, data {}, config {}) {return this.request(Object.assign({ url, data, method: GET }, config))}/** 封装POST请求 */post(url, data {}, config {}) {return this.request(Object.assign({ url, data, method: POST }, config))}/** 并发请求 */all(...promise) {console.log(all, promise)return Promise.all(promise)}showLoading() {wx.showLoading({title: 加载中,})}hideLoading() {wx.hideLoading()}
}export default WxRequesthttp.js
import WxRequest from ./request// 实例化
const instance new WxRequest()// 配置请求拦截器
instance.interceptors.request (config) {const token wx.getStorageSync(token)if (token) {config.header[token] token}return config
}
// 配置响应拦截器
instance.interceptors.response async (response) {const { isSuccess, data } responseif (!isSuccess) {wx.showToast({title: 网络异常请重试,icon: error,})return response}switch (data.code) {case 200:return datacase 208:wx.showModal({title: 提示,content: 鉴权失败请重新登录,complete: (res) {if (res.confirm) {wx.clearStorage()// TODO 跳转登录页面}},})return Promise.reject(response)default:wx.showToast({title: 程序出现异常,icon: error,})return Promise.reject(response)}
}export default instance
