当前位置:首页 > 技术 > 前端 > 微信小程序promise接口封装

微信小程序promise接口封装

DChen9个月前 (03-24)前端1.15 K0

微信小程序(其他小程序),发送请求简单,但在一个成十上百个小程序文件的项目中,我们每一个小程序文件都要写 wx.request岂不是很麻烦?后期的维护也不方便,所以我们要对 wx.request进行进一步的封装。

----------------------------分割线-----------------------------

  • 第一步: 首先我们先创建一个http文件夹,然后里面再建三个小文件夹,分别为env.js, api.js, request.js。

  • 第二步: 编辑env.js文件内容

    分开环境,方便切换环境。

module.exports = {
  // 开发环境
  dev: {
    baseUrl: 'https://127.0.0.0:8080'
  },
  // 测试环境
  test: {
    baseUrl: 'https://me.test.com'
  },
  // 生产环境
  prod: {
    baseUrl: 'https://me.prod.com'
  }
}
  • 第三步: 编辑request.js文件内容:

    开始封装。

const { baseUrl } = require('./env').dev

// 封装ajax
module.exports = {
  request: function(url, method = 'post', data = {}, isLoading = true) {
    // 操作url
    var url = `${baseUrl}/${url}`
    // 操作data
    var data = data
    console.log(url,data)
    if (isLoading) wx.showLoading({ title: '加载中...' })
    return new promise((resolve, reject)=>{
      wx.request({
        url: url,
        method: method,
        data: data,
        header: {
          'Content-type': 'application/x-www-form-urlencoded'
        },
        success(res) {
          if (res.statusCode === 200 && res.data.code === 0) {
            resolve(res.data)
          } else {
            wx.showToast({
              title: '接口有问题',
              icon: 'none'
            })
            reject(res.data)
          }
        },
        fail() {
          wx.showToast({
            title: '接口有问题',
            icon: 'none'
          })
          reject(res.data)
        }
      })
    })
  }
}
  • 第四步: 编辑api.js文件内容:

    统一放接口,方便修改和整理。 可以创建多个api文件,如:api1.js、api2.js、api3.js。

const { request } = require('./request')

module.exports = {
  // 获取列表
  getList:(d)=>request('shop/list', 'POST', {d}, true),
  // 获取详情
  getDetails:(d)=>request('shop/details', 'POST', {d}, true)
}
  • 第五步: 引入到页面:

//index.js
const { getList, getDetails } = require('../../http/api')


//......
//......


onLoad: function() {
  let data = {
    code: 1,
    page: 1,
    pageSize: 10,
  }
  getList(data).then((res)=>{
    console.log(res)
  })
}


原文链接:https://juejin.cn/post/7016983161275940901


取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

版权声明:本文由“憨小猪”发布,如需转载请注明出处。

本文链接:https://www.phper.red/post/155.html

标签: jspromise

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。