微信小程序（封装网络请求）

---

前言

为什么不使用微信小程序自带的网络请求，原因如下：

1. 避免重复代码
2. 避免回调地狱

---

一、封装要求

1. 封装功能函数
   1. 功能点明确
   2. 函数内部应该保留固定代码(静态的)
   3. 将动态的数据抽取成形参，由使用者根据自身的情况动态的传入实参
   4. 一个良好的功能函数应该设置形参的默认值(ES6的形参默认值)
2. 封装功能组件
   1. 功能点明确
   2. 组件内部保留静态的代码
   3. 将动态的数据抽取成props参数，由使用者根据自身的情况以标签属性的形式动态传入props数据
   4. 一个良好的组件应该设置组件的必要性及数据类型

   props: {
         
         
   	msg: {
         
         
   		required: true,
   		default: 默认值,
   		type: string
   	}
   }
   

二、 微信小程序自带的网络请求

Page({
    
    
	onLoad(options) {
    
    
	   wx.request({
    
    
	     url: 'http://localhost:3000/banner',
	     data: {
    
    
	       type: 2
	     },
	     success: (res) => {
    
    
	       console.log('请求成功：', res)
	     },
	     fail: (err) => {
    
    
	       console.log('请求失败：', err)
	     }
	   })
	 },
})

二、具体的封装实现

目录结构

request.js 文件

import config from "./config";
export default (url, data={
    
    }, method="GET") => {
    
    
  // 1. new Promise 初始化 promise 实例的状态为 pending
  return new Promise((resolve, reject) => {
    
    
    wx.request({
    
    
      url: config.host + url,
      data,
      method,
      success: (res) => {
    
    
        // console.log('请求成功：', res)
        // 2.1 修改 promise 实例的状态为成功
        resolve(res.data)
      },
      fail: (err) => {
    
    
        // console.log('请求失败：', err)
        // 2.2 修改 promise 实例的状态为失败
        reject(err)
      }
    })
  })
}

config.js 文件

// 配置服务器相关信息
export default {
    
    
  host: 'http://localhost:3000'

}

具体调用

Page({
    
    
	async onLoad(options) {
    
    
	   let result = await request('/banner', {
    
    type: 2})
	   console.log('结果数据：', result);
	 },
})