5.微信小程序 - 技术栈

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