微信小程序api接口调用用封装

                                  微信小程序api接口调用用封装

1. 在 02-项目 下新建request目录及index.js文件

1.1 02-项目\request\index.js

 1.2.index.js


// 同时发送异步代码的次数
let ajaxTimes&＃61;0;
export const request&＃61;(params)&＃61;>{// 判断 url中是否带有 /my/ 请求的是私有的路径 带上header tokenlet header&＃61;{...params.header};if(params.url.includes("/my/")){// 拼接header 带上tokenheader["Authorization"]&＃61;wx.getStorageSync("token");}ajaxTimes&＃43;&＃43;;// 显示加载中 效果wx.showLoading({title: "加载中",mask: true});// 定义公共的urlconst baseUrl&＃61;"https://api.zbztb.cn/api/public/v1";return new Promise((resolve,reject)&＃61;>{wx.request({...params,header:header,url:baseUrl&＃43;params.url,success:(result)&＃61;>{resolve(result.data.message);},fail:(err)&＃61;>{reject(err);},complete:()&＃61;>{ajaxTimes--;if(ajaxTimes&＃61;&＃61;&＃61;0){// 关闭正在等待的图标wx.hideLoading();}}});})
}

 2.在项目中使用异步请求

02-项目代码\02-项目\pages\index

index.js 

// 0 引入 用来发送请求的 方法 一定要把路径补全
import { request } from "../../request/index.js";
Page({data: {// 轮播图数组swiperList: [],// 导航 数组catesList:[],// 楼层数据floorList:[]},// 页面开始加载 就会触发onLoad: function (options) {// 1 发送异步请求获取轮播图数据 优化的手段可以通过es6的 promise来解决这个问题 // wx.request({// url: &＃39;https://api.zbztb.cn/api/public/v1/home/swiperdata&＃39;,// success: (result) &＃61;> {// this.setData({// swiperList: result.data.message// })// }// });this.getSwiperList();this.getCateList();this.getFloorList();},// 获取轮播图数据getSwiperList(){request({ url: "/home/swiperdata" }).then(result &＃61;> {this.setData({swiperList: result})})},// 获取 分类导航数据getCateList(){request({ url: "/home/catitems" }).then(result &＃61;> {this.setData({catesList: result})})},// 获取 楼层数据getFloorList(){request({ url: "/home/floordata" }).then(result &＃61;> {this.setData({floorList: result})})},
})