1.模块封装
(1)可以减少代码冗余
(2)进行后续网络封装
2.消息提示模块封装
(1)封装思路
创建一个toast方法对wx.showToast()方法进行封装
(2)调用方法
导入使用:import{toast}from'./extendApi'
toast()
toast({title:'数据加载失败..',mask:true})
挂载到wx全局对象上
wx.toast()
wx.toast({title:'数据加载失败..',mask:true})
3.对话框模块封装
wx.showModal()模态对话框是一个频繁使用的Api,通常向用户询问一些操作,如是否退出删除
4.封装本地存储Api
(1)数据存储
(2)从本地读取数据
(3)从本地移除指定k的数据
(4)清除本地所有数据
5.封装异步Api
(1)数据存储
(2)从本地读取数据
(3)从本地移除指定k的数据
(4)清除本地所有数据
6.网络请求封装
小程序大部分Api都是异步Api,这类Api接口通常都接收一个Object类型的形参
实例化代码并暴露出去
html
const instance = new WxREquest()
export default instance调用
html
import instance from'../../ utils/request'
Page({
handler(){
//第一种方法
instance.request({
url:'',
method:''.
})
.then((res)=>{
console.log(res);
})
//第二种
const res = await instance.request({
url:'',
method:'',
})
console.log(res);
}
})设置请求参数
html
class WxRequest{
default = {
baseURL:''
url:''
data:null,
method:'GET',
header:{
"Content-type":'application/json'
},
timeout:60000
}
constructor(params = {}){
this.default = Object.assign({},this.defaults,params)
}
request(options){
options.url = this.default.baseURL + options.url
options = {...this,defaults,...options}
return new Promise((resolve,reject)=>{
wx.request({
..option,
success:(res) => {
resolve(res)
},
fail:(err) => {
reject(err)
},
})
})
}
}
实例化
const instance = new WxRequest({
timeout:15000
})
export default instance封装快捷方法
html
get(url,data = {},config = {}){
return this.request(Object.assign({url,method:'GET'},config))
}
delete(url,data = {},config={}){
return this.request(Object.assign({url.data,methd:'DELETE'},config))
}定义请求拦截器
html
interceptors = {
request:(config) => config,
request:(respnse) => response,
}配置请求拦截器
html
instance,interceptor是.request= (config) => {
return config
}
instance.interceptors.response = (response) => {
return response
}
java
class WxRequest {
request(options) {
return new Promise((resolve, reject) => {
wx.request({
...options,
success: (res) => {
if (this.interceptors.response) {
res = this.interceptors.response({ response: res, isSuccess: true })
}
resolve(res)
},
fail: (err) => {
if (this.interceptors.response) {
err = this.interceptors.response({ response: err, isSuccess: true })
}
reject(err)
}
})
})
}
}
const instance = new WxRequest({
baseURL: 'https://gmall-prod.atguigu.cn/mall-api'
})
instance.setRequestInterceptor((config) => {
console.log('执行请求拦截器')
return config
})
instance.setResponseInterceptor((response) => {
const { response: res, isSuccess } = response
if (!isSuccess) {
wx.toast('网络异常，请稍后重试~')
return res
}
return response.data
})
export default instance
java
import WxRequest from './request'
import { clearStorage } from './storage'
import { modal, toast } from './extendApi'
const instance = new WxRequest({
baseURL: 'https://gmall-prod.atguigu.cn/mall-api',
timeout: 15000
})
instance.interceptors.request = (config) => {
if (getStorage('token')) {
config.header['token'] = wx.getStorageSync('token')
}
return config
}
instance.interceptors.response = async (response) => {
const { isSuccess, data } = response
if (!isSuccess) {
wx.showToast({
title: '网络异常请重试',
icon: 'error'
})
return response
}
switch (data.code) {
case 200:
return data
case 208:
const res = await modal({
title: '提示',
content: '鉴权失败，请重新登录',
showCancel: false
})
if (res) {
clearStorage()
wx.navigateTo({
url: '/pages/login/login'
})
}
return Promise.reject(response)
default:
toast({
title: '程序异常，请联系客服或稍后重试！'
})
return Promise.reject(response)
}
}
export default instance添加loading
java
class WxRequest {
constructor(options = {}) {
}
request(options) {
options.url = this.defaults.baseURL + options.url
options = { ...this.defaults, ...options }
wx.showLoading()
if (this.interceptors.request) {
options = this.interceptors.request(options)
}
return new Promise((resolve, reject) => {
wx.request({
...options,
success: (res) => {
},
fail: (err) => {
},
complete: () => {
wx.hideLoading()
}
})
})
}
}控制loading显示
java
class WxRequest {
defaults = {
url: '', // 开发者服务器接口地址
data: null, // 请求参数
header: {}, // 设置请求的 header
timeout: 60000, // 超时时间
method: 'GET', // 请求方式
isLoading: true // 是否显示 loading 提示框
}
}实例化
java
const instance = new WxRequest({
baseURL: 'https://gmall-prod.atguigu.cn/mall-api',
isLoading: false // 是否隐藏 loading
})7.封装upload Api
java
Page({
data: {
avatarUrl: '../../assets/Jerry.png'
},
async chooseavatar(event) {
const { avatarUrl } = event.detail
const res = await instance.upload(
'/fileUpload',
event.detail.avatarUrl,
'file'
)
this.setData({
avatarUrl: res.data
})
},
}8.使用npm包发送请求
java
import WxRequest from './request'
import { getStorage, clearStorage } from './storage'
import { modal, toast } from './extendApi'
import { env } from './env'
const instance = new WxRequest({
baseURL: env.baseURL,
timeout: 15000,
isLoading: false
})
instance.interceptors.request = (config) => {
const token = getStorage('token')
if (token) {
config.header['token'] = token
}
return config
}
instance.interceptors.response = async (response) => {
const { isSuccess, data } = response
if (!isSuccess) {
wx.showToast({
title: '网络异常请重试',
icon: 'error'
})
return response
}
switch (data.code) {
case 200:
return data
case 208:
const res = await modal({
content: '鉴权失败，请重新登录',
showCancel: false // 不显示取消按钮
})
if (res) {
clearStorage()
wx.navigateTo({
url: '/pages/login/login'
})
}
return Promise.reject(response)
default:
toast({
title: '程序出现异常，请联系客服或稍后重试'
})
return Promise.reject(response)
}
}
export default instance