微信小程序—封装网络请求
作者:邱名涛
撰写时间:2020 年2 月13日
// 封装路径request/index.js
//封装微信网络请求
export const request=(params)=>{
//调用函数里面的参数
return new Promise((resolve,reject)=>{
//resolve代表成功函数
//reject代表失败函数
wx.request({
...params,//...解构参数
//成功调用
success:(result)=>{
resolve(result);
},
//失败调用
fail:(err)=>{
reject(err);
}
});
})
}
// 引入 request/index.js封装的网络请求
//import {request} 就是const 定义的函数(因为是封装好的代码,所以一定要把路径补全)
import { request } from "../../request/index.js";
Page({
/**
* 页面的初始数据
*/
data: {
//轮播图数组
swiperList:[],
//导航数组
catesList:[]
},
//onLoad就是自动加载
onLoad: function (options) {
this.getSwiperList()// 获取轮播图数据
this.getcatesList()// 获取分类导航数据
},
// 获取轮播图数据
getSwiperList(){
request({ url:"https://api.zbztb.cn/api"})
.then(result=>{
this.setData({
swiperList:result.data.message
})
})
},
// 获取分类导航数据
getcatesList(){
request({ url:"https://api.zbztb.cn/api"})
.then(result=>{
this.setData({
catesList:result.data.message
})
})
},
})
//发送异步请求获取轮播图数据 优化的手段可以通过es6的 promise来解决这个问题
封装代码只要写入 函数 传入 参数 然后就可以直接调用,优化了请求路径代码