返回

全网小程序接口请求封装实例

前端

前言

在小程序开发中,我们会经常用到各种各样的接口来获取数据,为了方便管理和维护这些接口,我们可以将它们进行封装。

封装步骤

1. 新建两个js文件

在utils文件夹里面新建两个js文件,一个是api.js,一个就是requtil.js。

2. 在api.js中封装接口

// api.js
const request = require('./requtil.js')

// 封装的接口
function login() {
  return request({
    url: '/api/login',
    method: 'POST',
    data: {
      username: 'zhangsan',
      password: '123456'
    }
  })
}

function getUserInfo() {
  return request({
    url: '/api/user/info',
    method: 'GET'
  })
}

module.exports = {
  login,
  getUserInfo
}

3. 在requtil.js中封装请求方法

// requtil.js
const https = require('https')

// 封装的请求方法
function request(options) {
  return new Promise((resolve, reject) => {
    const req = https.request(options, (res) => {
      res.setEncoding('utf-8')

      let data = ''
      res.on('data', (chunk) => {
        data += chunk
      })

      res.on('end', () => {
        try {
          const result = JSON.parse(data)
          resolve(result)
        } catch (e) {
          reject(e)
        }
      })
    })

    req.on('error', (e) => {
      reject(e)
    })

    req.end()
  })
}

module.exports = request

4. 在app.js中进行全局注册

// app.js
const api = require('./utils/api.js')

App({
  globalData: {
    api: api
  }
})

5. 在页面中调用接口

// index.js
const app = getApp()

Page({
  onLoad() {
    app.globalData.api.login().then(res => {
      console.log(res)
    })
  }
})

完整demo

完整demo可参考这里

结语

以上就是全网小程序接口请求封装的实例,希望对您有所帮助。