微信小程序接口拼接与请求封装

前言

这里接口请求思想来自微信小程序 wx.request 封装的分享。这是初步代码,后续如有修改会同步更新,因为刚开始写微信小程序,也是一个新人呢~一起进步把

一、URL拼接

api:

  url: `${baseUrl}XX/{id}/XX?XX={page}`

这里向String添加一个方法,方便后续使用:

String.prototype.format = function (params) {
  let s = this
  for (let item in params) {
    let re = new RegExp('{' + item + '}', 'gm')
    s = s.replace(re, placeholders[item])
  }
  return s
}

url调用的时候这样

url.format({
        id: "XX",
        page: 1
      })

二、接口请求封装

const req = (url, options) => {
  return new Promise(function(resolve, reject) {
    wx.request({
      data: options.data,
      url: url,
      header: {
        'XX': 'X'
      },
      method: options.method,
      success: res => {
        if (res.statusCode == 200) {
          resolve(res.data)
        } else {
          reject(res)
        }
      },
      fail: reject
    })
  });
};

const get = (url, options) => {
  return request(url, {
    method: 'GET',
    data: options
  })
}

const post = (url, options) => {
  return request(url, {
    method: 'POST',
    data: options
  })
}

接口与URL的共同使用

  getData: function() {
    req.get(url.format({
        id: "123456",
        page:1
      }))
      .then(resp => {
        console.log(resp)
      }).catch(err => {
        console.log(JSON.stringify(err))
      })
  }

采坑

新建微信小程序的时候,怎么都创建不了,是因为.选择小程序项目时,项目目录要选择在一个空的文件夹!!!下,/(ㄒoㄒ)/~~

推荐阅读更多精彩内容