封装小程序request请求[接口函数]-Toy模板网

这篇具有很好参考价值的文章主要介绍了封装小程序request请求[接口函数]。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

小程序封装接口,微信小程序相关,微信小程序,小程序,封装接口,wx.request

在这篇小程序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接口进行测试：

小程序封装接口,微信小程序相关,微信小程序,小程序,封装接口,wx.request

测试接口已经准备完成，设置一下 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);
        })
    }
})

小程序封装接口,微信小程序相关,微信小程序,小程序,封装接口,wx.request

封装各数据接口请求函数

项目中用着许许多多的接口数据请求，此时对于这些接口函数进行封装处理，使用的时候可以直接来导入使用；

创建 /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)});
 }
...

小程序封装接口,微信小程序相关,微信小程序,小程序,封装接口,wx.request

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)
}

小程序封装接口,微信小程序相关,微信小程序,小程序,封装接口,wx.request

以上就是封装小程序request数据请求和封装各接口数据请求函数的内容；可以在你的小程序项目当中去使用，封装小程序的request请求和封装各接口请求，可以让你在小程序项目中更上一层！感谢大家的支持！！！

小程序封装接口,微信小程序相关,微信小程序,小程序,封装接口,wx.request 文章来源地址https://www.toymoban.com/news/detail-770393.html

到了这里，关于封装小程序request请求[接口函数]的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

封装小程序request请求[接口函数]