微信小程序 基础api封装--使用

简介：
基于 微信小程序 界面-交互api  wx.showToast() 、 wx.showModal()封装封装的extendApi，本地存储wx.setStorageSync、wx.setStorage 等 封装的storage.js，网络请求 wx.request() 封装的 request.js ，介绍下 封装api 组织使用 

1. 实例化 请求文件 http.js 文件  

/***
*  请求实例化文件   
*  模块依赖上面封装好的自定义模块：extendApi.js/storage.js 登录页面
*  1.可实例化默认配置，带请求拦截和响应拦截；可拦截token ，token不存在或失效可跳转登录页面
*  2. 带默认loading效果（可配置不展示）
*  3. 可配置基础路径（可抽离切换不同环境域名）+ 接口路径
*  
*/

/***
*  请求实例化文件   
*  模块依赖上面封装好的自定义模块：extendApi.js/storage.js 登录页面
*  1.可实例化默认配置，带请求拦截和响应拦截；可拦截token ，token不存在或失效可跳转登录页面
*  2. 带默认loading效果（可配置不展示）
*  3. 可配置基础路径（可抽离切换不同环境域名）+ 接口路径
*  
*/
import WxRequest from "./rquest"
import {getStorage, clearStorage} from "./storage"
import {modal, toast} from "./extendApi"
// 环境配置
import {env} from "./env"

const instance = new WxRequest({
  baseUrl: env.baseUrl, // 取环境配置
  timeout: 15000,
  isLoading: true // 实例化时是否需要 loading
})

// 配置请求拦截 

instance.interceptors.request = (config)=>{
  // 请求之前检查本地 是否有token令牌
  const token = getStorage("token")
  if(token){
    config.header['token'] = token
  }
  return config
}

// 配置响应拦截 
instance.interceptors.response = async (response)=>{
  const {isSuccess, data} = response

  // 若isSuccess 为 false 说明执行了 fail函数，则提示异常
  if(!isSuccess){
    wx.showToast({
      title: '网络异常请重试',
      icon:"error"
    })
    return response
  }

  // 判断服务器响应状态码 执行不同业务逻辑 例如： 200 正常返回数据 208 需要清除本地token重新跳转登录页
  switch(data.code){
    case 200: 
    // 返回正常 解构的数据对象（根据接口返回数据自定义）
      return data
    // 没有token或token失效 需要重新登录（根据实际服务端返回值 定义）
    case 208: 
      const res = await modal({
        content: "鉴权失败，请重新登录",
        showCancel: false // 不显示取消按钮

      })
      if(res){
        // 清除之前失效token 及本地存储信息 
        clearStorage() 

        wx.navigateTo({
          url: '/pages/login/login',  
        })
      }
      return Promise.reject(response)

    default:
      toast({
        title:"程序出现异常，请联系客服或稍后重试"
      })
      return Promise.reject(response)

  }

}
// 抛出instance 实例方法
export default instance

2. 使用 实例化网络请求后的 js 文件 发起网络请求 的两种方式

// 使用 
import instance from "../../utils/http"
async handler(){
    // 请求方式 一
    // instance.request({
    //   url:"/index/findBanner",
    //   method:"GET"
    // }).then(res=>{
    //   console.log('success ', res)
    // }).catch(err=>{
    //   console.log("error ", err)
    // })
    // 请求方式二 /index/findBanner  /cart/getCartList
    const res = await instance.get("/index/findBanner",null, {isLoading: false})
    console.log(res)
}

3. 微信小程序 组织 网络请求api 的 使用方式

• 项目根目录 新建 api 文件夹

• 每个小程序页面或模块单独 定义1个js文件方便管理

• 请求api依赖之前封装好的 http.js

// 新建api 目录，在该目录下新建 index.js api文件
// 首页接口请求 
import http from "../utils/http"
/**
 * @description 获取首页轮播图数据
export reqSwiper = ()=>{
  return http.get("/index/findBanner")
}*/
//简写 

export const reqSwiper = ()=> http.get("/index/findBanner")

// 使用
// 在首页 .js 文件 
page({

  // 监听页面加载
  onLoad(){
    // 调用
    this.getBannerInfo()
  },
  // 获取轮播图数据
  async getBannerInfo(){
    const res = await reqSwiper()
    console.log(res)
  }
})

学习来源：来自 尚硅谷 网络公开课