在这篇小程序API的Promise化文章中讲到小程序官方提供的异步API都是基于回调函数来实现的，在大量的使用这种回调函数就会造成回调地狱的问题，以及代码的可读性和可维护性差，通过对小程序API的Promise化能解决，那么本篇是来讲进行对微信小程序网络数据请求的接口请求封装。
封装小程序 request 请求
在 /utils 目录下创建 request.js 文件进行小程序request请求的封装：
// 封装数据请求request
const BASE_URL = ''; // 基础地址
export default function request(url,params={}){
return new Promise((resolve,reject)=>{
wx.showLoading({ // 请求提示
title: '正在加载中...',
})
wx.request({
url: BASE_URL + url, // 请求url地址
data: params.data || {}, // 请求参数
header: params.header || {}, // 请求头
method: params.method || 'GET', // 请求方式
dataType: 'json', // 返回数据类型
success: (res)=> { // 成功调用
wx.hideLoading(); // 关闭请求提示
resolve(res.data) // 成功处理res.data中的数据
},
fail: (err)=> { // 失败调用
wx.hideLoading(); // 关闭请求提示
wx.showToast({ // 提示错误信息
title: err || '请求错误！',
})
reject(err) // 失败处理err
}
})
})
}对于request的网络数据请求的封装并没有那么的复杂，加上一些注释小白应该可以更容易理解，在未 return new Promise(..) 之前返回的是一个Promise对象，这时可以再 new 一个Promise拿到数据，它有两个参数，两个参数分别又是函数，即高阶函数；请求之前使用wx.showLoading提示请求在加载中，通过wx.request发起数据请求，与基础地址BASE_URL拼接，通过data接收传入参数，header、method同理，success成功调用关闭掉请求提示交给resolve处理成功结果，fail失败调用关闭掉请求提示，同时需要提示用户请求错误的信息后交给reject处理失败结果；
如何来调用封装的request请求呢？
首先先来准备一下数据请求的测试接口，这里通过本地Node.js搭载的服务器提供的API接口进行测试：
测试接口已经准备完成，设置一下 BASE_URL 基础地址为 http://127.0.0.1:3000；
const BASE_URL = 'http://127.0.0.1:3000'这里需要设置【选中】微信小程序开发者工具中的【详情】- 【不校验合法域名...】这项；
在 index.wxml 中设置一个按钮：
<button bindtap="handleClick">request请求</button>在 index.js 中引入封装request数据请求文件，并编写按钮的触发事件 handleClcik：
// index.js
const app = getApp()
import request from '../../utils/request'
Page({
handleClick(){
request('/api/navList').then(res=>{
console.log(res);
})
}
})
封装各数据接口请求函数
项目中用着许许多多的接口数据请求，此时对于这些接口函数进行封装处理，使用的时候可以直接来导入使用；
创建 /util/api.js 文件封装各接口请求函数的文件：
// 引入封装request请求函数
import request from './request'
// 获取swiperList数据
export const reqSwiperList = () => request('/api/swiperList')
// 获取navList数据
export const reqNavList = () => request('/api/navList')
// 获取category数据
export const reqCategory = () => request('/api/category')
下面在 index.js 中的onLoad中来调用使用：
...
onLoad:function(){
reqSwiperList().then(res=>{console.log('reqSwiperList',res)});
reqNavList().then(res=>{console.log('reqNavList',res)});
reqCategory().then(res=>{console.log('reqCategory',res)});
}
...
async 和 await
通过 async 和 await 的写法会比使用 .then(res=>{}) 的这种方式更加简练一些；下面来将 handleClick 中的请求函数做一个变更：
handleClick(){
reqSwiperList().then(res=>{
console.log(res);
})
}使用 async 和 await 写法：
async handleClick(){
const res = await reqSwiperList()
console.log(res)
}
以上就是封装小程序request数据请求和封装各接口数据请求函数的内容；可以在你的小程序项目当中去使用，封装小程序的request请求和封装各接口请求，可以让你在小程序项目中更上一层！感谢大家的支持！！！文章来源：https://www.toymoban.com/news/detail-770393.html
文章来源地址https://www.toymoban.com/news/detail-770393.html
到了这里，关于封装小程序request请求[接口函数]的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
