网站建设企业云市场,单机怎么做网站,做游戏代练的网站,soho怎么做网站在这篇小程序API的Promise化文章中讲到小程序官方提供的异步API都是基于回调函数来实现的#xff0c;在大量的使用这种回调函数就会造成回调地狱的问题#xff0c;以及代码的可读性和可维护性差#xff0c;通过对小程序API的Promise化能解决#xff0c;那么本篇是来讲进行对… 在这篇小程序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 bindtaphandleClickrequest请求/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请求和封装各接口请求可以让你在小程序项目中更上一层感谢大家的支持
