微信小程序封装网络数据请求

微信小程序封装网络数据请求

• 目录结构

  

• 在根目录下创建api文件夹

• 在app文件夹下创建http.js、home.js、index.js（可以自定义）文件

  • 在app文件夹下的文件http.js中

    /**
     * url
     * method
     * header
     * data
     * timeout
     */
    
    const timeout = 5000
    const baseURL = 'http://localhost:3000'
    
    export default function ({
      url = '',
      data = '',
      method = 'GET',
      header = {
        'content-type': 'application/json'
      },
      // 图标
      isLoading = false,
      ...options
    }) {
      return new Promise((resolve, reject) => {
        if(isLoading) wx.showLoading({
          title: '加载中...',
        })
        wx.request({
          url: baseURL + url,
          data,
          header,
          timeout,
          ...options,
          success: (res) => {
            if (res.statusCode === 200 || res.statusCode === 201) return resolve(res.data)
          },
          fail: (err) => {
            reject(err)
          },
          complete:() => wx.hideLoading()
        })
      })
    }
    

• 在需要使用的地方进行导入即可使用

  • 在app文件夹下的文件home.js中（这里的后台数据是我自己的，需要的留言）

    import http from './http'
    
    // 查询商品
    export const queryGoods = (data) => http({
      url:'/home/queryGoods',
      data,
      isLoading:true
    })
    

• 统一导出

  • 在app文件夹下的文件index.js中

    export * from './home'
    

• 在需要的地方进行导入

  • 在页面index中的index.js中

    import {queryGoods} from '../../api/index'
    
    Page({
      data: {
       goods:[]
      },
      onLoad() {
        this.queryGoods()
      },
      async queryGoods() {
        const {data} = await queryGoods({
          type:'pop',
          page:10
        })
        // console.log(goods);
        this.setData({goods:data})
      }
    })
    

  • 这个时候就可以看到调试器中的AppData数据已经请求过来了，可以进行页面的渲染了。

    

• 页面的渲染

  • 在页面index中的index.wxml中

    <view class="goods-list">
      <view class="goods" wx:for="{{goods}}" wx:key="index">
        <image src="{{item.show.img}}" mode="widthFix"></image>
        <view class="title">{{item.title}}</view>
      </view>
    </view>
    

  • 在页面index中的index.wxss中

    .goods-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
    }
    .goods {
      width: 45%;
    }
    .goods image {
      width: 100%;
      border-radius: 20rpx;
    }
    .title {
      padding: 0 5rpx;
      overflow: hidden;
      white-space: nowrap;
      line-height: 60rpx;
      text-overflow: ellipsis;
      font-size: 24rpx;
    }
    

• 页面最后的渲染效果