微信小程序封装网络数据请求
-
目录结构
-
在根目录下创建
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; }
-
-
页面最后的渲染效果