微信小程序封装wx.request 小程序wx.request接口封装方法

小程序开发

2021-05-11

  我们在开发小程序项目的时候,如果一个项目的功能非常负责,需求庞大的话,那么它的请求接口也会非常的多,因此如果把接口全写在一起,管理起来就很困难,所以我们常做的就是把小程序wx.request请求封装起来,今天厦门在乎科技为大家带来小程序wx.request接口封装方法,一起来了解一下吧。

  

微信小程序封装wx.request 小程序wx.request接口封装方法


  微信小程序封装wx.request:

  1.域名配置,一般情况下,项目中的域名前缀都是配置在 app.js 中

  App({

  onLaunch: function() {

  },

  globalData: {

  userInfo: null,

  loginCode: null,

  version: '1.0.0',

  host: 'https://**',

  }

  })

  2.封装 wx.request

  在小程序目录下建立 api 文件夹,并在文件夹下创建 api.js 脚本。下面开始封装 wx.request

  const app = getApp()

  const request = (url, options) => {

  return new Promise((resolve, reject) => {

  wx.request({

  url: `${app.globalData.host}${url}`,

  method: options.method,

  data: options.method === 'GET' ? options.data : JSON.stringify(options.data),

  header: {

  'Content-Type': 'application/json; charset=UTF-8',

  'x-token': 'x-token' // 看自己是否需要

  },

  success(request) {

  if (request.data.code === 2000) {

  resolve(request.data)

  } else {

  reject(request.data)

  }

  },

  fail(error) {

  reject(error.data)

  }

  })

  })

  }

  const get = (url, options = {}) => {

  return request(url, { method: 'GET', data: options })

  }

  const post = (url, options) => {

  return request(url, { method: 'POST', data: options })

  }

  const put = (url, options) => {

  return request(url, { method: 'PUT', data: options })

  }

  // 不能声明DELETE(关键字)

  const remove = (url, options) => {

  return request(url, { method: 'DELETE', data: options })

  }

  module.exports = {

  get,

  post,

  put,

  remove

  }

  

微信小程序封装wx.request 小程序wx.request接口封装方法


  3.管理 api 接口

  项目中的 api 大部分都是可以复用的。为了后期方便维护管理,这个时候需要把 api 提出来。有多种方法,比如可以按模块建立相应的 js 脚本。如下:

  const login = '/user/login' // 登录

  module.exports = {

  login

  }

  4.使用封装过后的 api

  import api from '../api/api'

  import { login } from '../**/conf' // 链接注意填写正确

  api.post(login, {

  data: ''

  }).then(res => {

  if(){}

  }).catch(err => {

  wx.showToast({

  title: err.message,

  icon: 'none'

  })

  })

  post 请求就是api.post()...,get 请求就是api.get()...

  

微信小程序封装wx.request 小程序wx.request接口封装方法


  以上就是今天为大家带来的关于“微信小程序封装wx.request 小程序wx.request接口封装方法”全部内容,通过小程序封装wx.request能够提高我们对接口的集中化管理,想要了解更多关于小程序开发的内容,欢迎关注厦门在乎科技-专注小程序、app、网站开发

即刻联系「在乎科技」专业项目经理为您提供产品咨询和项目报价!

立即咨询

CONTACT US

联系我们

联系电话:

131-6399-9993

电子邮箱:

公司地址:

厦门市思明区莲花南路6号北方大厦601单元

公司地址