• 欢迎来到八本那年博客,很高兴可以在对的年纪遇见对的你!
  • 因主题导致QQ登录的小伙伴在评论中显示默认头像,请去个人中心重新上传头像即可。

微信小程序封装request请求

代码笔记 barben 4个月前 (04-22) 156次浏览 0个评论

1、创建api.js文件,封装wx.request请求

// import apiList from './apiList' // 使用import引入会报错Unexpected identifier,所以改用require
const host = require('./apiList').host; // 引入host地址
const apiList = require('./apiList').apiList; // 引入接口列表

const apiRequest = (url, method, data, header) => { // apiRequest方法接收wx.request所需要的参数,如果不够还可以自己添加参数
  let promise = new Promise(function (resolve, reject) {
    wx.request({
      url: host + url,
      data: data || null,
      method: method,
      header: header || { 'content-type':'application/x-www-form-urlencoded' },
      success: function (res) {
        // 接口调用成功
        resolve(res); // 根据业务需要resolve接口返回的json的数据
      },
      fail: function (res) {
        // 接口调用失败
        reject({ errormsg: '网络错误,请稍后重试', code: -1 });
      }
    })
  });
  return promise;  // 注意,这里返回的是promise对象
}

var list = {};
for(item in apiList) {
  list[item] = {
    index: item,
    http(data) {
      return new Promise((resolve, reject) => {
        resolve (apiRequest(apiList[this.index][1], apiList[this.index][0], data))
      })
    }
  };
}

// 使用export default导出会报错Unexpected token export,所以改用module.exports
// export default {
//   login, register
// }
module.exports = list; // 最后将这个对象导出,给其他页面调用

 

2、创建apiList.js文件,用来管理请求地址

// 设置API接口的ip地址和端口
let host = 'http://192.168.0.122:83/'

// 所有接口列表
let apiList = {
    login: ['post', 'user/login'],
    register: ['get', 'user/register']
}

// 将host和apiList导出
module.exports = {
    host, apiList
}

 

3、在页面中调用请求

var api = require('../../utils/api.js'); // 需要先引入封装文件

Page({
  onLoad() {
    api.login.http({username: "barben", password: "23333333"}).then(res => {
        console.log(res);
    })
    api.register.http().then(res => {
        console.log(res);
    })
  }
})

请求效果

大功告成,现在就可以使用自己封装的请求方式,替换小程序的request啦。

虽然可以完美实现我期望的效果,但是这轮子的写法不太干脆利落,代码中使用了一段for循环,自认为是最大的败笔,欢迎各位大牛前来指点!


八本那年博客,我们一直都在
如作者未注明既为原创文章,转载请注明本文链接及出处
微信小程序封装request请求 - https://www.barben.cn/code/800.html
喜欢 (2)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体

在八本那年评论需要带上你的昵称和邮箱哦!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址