返回
全网小程序接口请求封装实例
前端
2023-11-21 17:22:45
前言
在小程序开发中,我们会经常用到各种各样的接口来获取数据,为了方便管理和维护这些接口,我们可以将它们进行封装。
封装步骤
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可参考这里。
结语
以上就是全网小程序接口请求封装的实例,希望对您有所帮助。