小程序网络请求封装

爱被打了一巴掌 2022-02-26 12:52 405阅读 0赞

目录结构

…
├── images
├── api
│ └── index.js // 首页的接口
│ └── classify.js // 分类的接口
│ └── …
├── pages
│ └── index
├── utils // 工具类
│ └── request.js // 请求封装
└── package.json
…

基本说明

  • 此方法是基于微信小程序API wx.request 的简单封装，方法中暂有4个参数，若后期需要可自行添加。函数返回一个promise用来执行一个异步操作。
  • Promise可以理解为一个承诺，它有3种状态：**pending（进行中）**，**fulfilled（已成功）**，**rejected（已失败）**，当Promise执行成功时，成功状态会在其参数resolve中接收并传到then的参数中去，失败则是reject。

小程序请求封装

…js (utils/request.js)

  1. // 请求api的基础路径
  2. export const baseUrl = 'http://xxxxxxxxx/com'
  4. /**
  5.  * 统一的请求封装
  6.  * @param {String} api 请求的api地址
  7.  * @param {JSON} params 请求携带的参数
  8.  * @param {String} methods 请求方式，默认GET
  9.  * @param {boolean} [loading=true] 是否显示loading，默认true
  10.  */
  11. export function appRequest(api, params, method = 'POST', loading = true) {
  12.   return new Promise((resolve, reject) => {
  13.     // 请求开始，显示loading
  14.     if (loading) {
  15.       wx.showLoading({
  16.         title: '加载中'
  17.       })
  18.     }
  19.     // 请求
  20.     wx.request({
  21.       url: baseUrl + api,
  22.       data: params,
  23.       method: method,
  24.       dataType: 'json',
  25.       success: function(res) {
  26.         if (res.statusCode === 200) {
  27.           resolve(res) // 接收res并传到then的参数中去
  28.           wx.hideLoading() // 结束加载
  29.         } else {
  30.           wx.hideLoading()
  31.           reject()
  32.         }
  33.       },
  34.       error: function(e) {
  35.         reject(e)
  36.       }
  37.     })
  38.   })
  39. }

在页面js文件中的用法

…js (pages/index/index.js)

  1. // 引入请求函数
  2. import { appRequest } from "../../utils/request.js"
  4. // 引入请求api
  5. import { swiperJson,scheduleJson } from "../../api/index.js"
  7. Page({
  9.   /**
  10.    * 页面的初始数据
  11.    */
  12.   data: {
  13.     swiperJson: null, // 返回的轮播图数据
  15.     scheduleJson: null // 赛程json
  16.   },
  18.   /**
  19.    * 生命周期函数--监听页面加载
  20.    */
  21.   onLoad: function(options) {
  23.     // 加载轮播图
  24.     this.getSwiperJson()
  26.     // 加载赛程
  27.     this.getScheduleJson()
  29.   },
  31.   // 请求数据库获得轮播图
  32.   getSwiperJson() {
  33.     appRequest(swiperJson).then(res => {
  34.       console.log(res)
  35.       this.setData({
  36.         swiperJson: res.data
  37.       })
  38.     })
  39.   },
  41.   // 请求数据库获得赛程
  42.   getScheduleJson() {
  43.     appRequest(scheduleJson).then(res => {
  44.       console.log(res)
  45.       this.setData({
  46.         scheduleJson: res.data
  47.       })
  48.     })
  49.   }
  51. })

导出请求api

…js (pages/api/index.js)

  1. // 轮播图
  2. export const swiperJson = "/WxIndex/swiper.action"
  4. // 赛程
  5. export const scheduleJson = "/WxIndex/schedule.action"
  7. //...

发表评论

表情：
评论列表 （有 0 条评论，405人围观）

还没有评论，来说两句吧...

相关阅读