微信小程序—封装网络请求

微信小程序—封装网络请求
作者：邱名涛
撰写时间：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来解决这个问题
封装代码只要写入 函数 传入 参数 然后就可以直接调用，优化了请求路径代码