轮播图 - 数据请求（微信小程序）

  在大部分项目中，轮播图都是必不可少的。接下来通过轮播图这一实例来学习微信小程序中的数据请求。

一、网络请求的学习

 1. 基本使用

  微信提供的专属的API接口，用于网络请求：wx.request(Object object)

• 官方文档：
  https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html

• 注意事项：
  https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html
  

 2. 关键属性解析

• url：必传（不然请求什么呢）
• data：请求参数
• method：请求的方式
• succes：成功时的回调
• fail：失败时的回调

 3. 网络请求的三种基本方式 - 原生方式

  在某一页面中的 .js文件中，onLoad属性中发送网络请求

  （1）发送最简单的get请求

Page({
	onLoad:function (options){
		wx.request({
	      url: 'http://httpbin.org',
	      success:function(res){  //回调函数
	        console.log(res)
	      }
	    })
	}
})

  （2）get请求，并且携带参数

Page({
	onLoad:function (options){
	    wx.request({
	      url: 'http://123.207.32.32:8000/home/data',
	      data:{
	        type:'sell',
	        page:1
	      },
	      success:function(res){
	        console.log(res)
	      }
	    })
	}
})

  （3）post请求，并且携带参数

Page({
	onLoad:function (options){
		wx.request({
	      url: 'http://httpbin.org/post',
	      method:'post',
	      data:{
	        name:'coderwhy',
	        age:18
	      },
	      success:function(res){
	        console.log(res)
	      },
	      fail:function(err){
	        console.log(err)
	      }
	    })
	}
})

 4. 进阶方式 - 请求分装（Promise）

  请求网络封装的两个原因：
  ① 降低网络请求和wx.request的耦合度
  ② 使用Promise的方法获取回调结果

  （1）在network.js文件中定义Promise

   写法一：

export default function request(options){
  return new Promise((resolve,reject)=>{
    wx.request({
      url: options.url,
      method: options.method || 'get',
      data: options.data || {},
      success: function (res) {
        resolve(res)
      },
      fail: function () {
        reject(err)
      }
    })
  })
}

   写法二：

export default function request(options) {
  return new Promise((resolve, reject) => {
    wx.request({
      url: options.url,
      method: options.method || 'get',
      data: options.data || {},
      success: resolve,
      fail: reject   //resolve和reject本身就是回调函数
    })
  })
}

  （2）在页面 .js文件中使用

   ① 导入network.js文件

    使用相对路径

import request from '../../service/network.js' //相对路径

   ② 调用request

Page({
	onLoad:function (options){
      request({
        url: 'http://123.207.32.32:8000/recommend'
      }).then(res => {
        console.log(res)
      }).catch(err =>{
        console.log(err)
      })
	}
})

二、数据请求实例 - 轮播图

 1. 思路

  在这里我的目标是做一个项目中的轮播图，需要有一个非常清晰的框架，为提高之后页面相同需要的编码效率，所以有一个非常重要的思想就是分层处理。（比如，现在在做的是一个首页的轮播图的数据请求，而之后会做的详情页面如果有相同的数据请求，就可以通过只修改变量名而直接调过来使用）
  第一层：装入baseURL（单独的 .js文件）
  第二层：用Promise进行封装
  第三层：定义函数（可以单独建一个有关网络请求的页面 .js文件）

 2. 步骤

  （1）在config.js中定义baseURL，并传出

const baseURL = "http://123.207.32.32:8000";

export {
  baseURL
}

  （2）在network.js中导入baseURL，并用Promise对request进行封装

import{
  baseURL
}from './config.js'

export default function(options){
  return new Promise((resolve,reject) => {
    wx.request({
      url: baseURL + options.url,
      method: options.method || 'get',
      data: options.data || {},
      success: resolve,
      fail: reject
    })
  })
}

  （3）在home.js中导入request，并对其定义函数（可以新建一个与数据请求相关的单独home.js文件 ）

import request from './network.js'

export function getMultiData(){
  return request({
    url: '/home/multidata'
  })
}

  （4）在页面文件中的home.js导入函数，并打印请求来的数据对其进行观察，得到需要数据的所在位置

import{
  getMultiData,
} from '../../service/home.js'  //分层处理

Page({
	data:{},
	onLoad:function(options){
	//1.请求轮播图数据
		getMultiData().then(res => {
			//getMultiData()用promise进行了封装，所以可以直接使用.then
			console.log(res)
		})
	}
})
	

  （5）转换变量使其可以在wxml中使用

Page({
  data: {
    banners: [],
    recommends:[]
   },

	onLoad:function(options){
		// 1.请求轮播图数据
		getMultiData().then(res => {
      		//getMultiData()用promise进行了封装，所以可以直接使用.then
      		//console.log(res)
      		//取出轮播图数据
      		const banners = res.data.data.banner.list
      		const recommends = res.data.data.recommend.list

      		//将banner和recommend放到data中(局部变量不能直接在wxml中使用)
      		this.setData({
        		banners: banners,  //增强写法：banners,
        		recommends: recommends  //recommends
      		})
    	})
    }
})

  以上就是有关轮播图的数据请求全部内容了，数据请求过来后就可以在页面中的wxml文件添加组件进行使用了。