原生小程序如何优雅地封装请求和调用接口？

微信小程序如何封装原生请求？如何调用接口？下面这篇文章为大家介绍原生微信小程序封装请求，并优雅地调用接口方法，希望对大家有所帮助！

本文属于代码片段，封装了原生微信小程序的请求。有个人写作习惯，仅供参考。目录结构。与请求、请求api等相关的├-api ├-config.js//Configuration项目。├-env.js//Environment配置├-request.js//Encapsulate主要功能γ ├-statuscode.js.生产& # 39；，//ENV:& # 39；测试& # 39；} statuscode.js//statusCode.js//配置一些常见的请求状态代码模块。exports = {success: 200，expire:403 } config.js//config.jsconst { env } = require（& # 39；。/env & # 39；）let BASEURLswitch（ENV）{ case & # 39；生产& # 39；:BASEURL = & # 39'破案例& # 39；测试& # 39；:BASEURL = & # 39'中断默认值:BASEURL = & # 39'Break}模块。exports = {baseurl，//项目接口地址，支持多个域名}主要功能//引入状态码status code = require（& # 39；。/status code & # 39；）//定义请求路径，BASEURL:通用请求APICBASEURL:中间平台的API。如果不使用中间平台，则不需要引入cbaseurlconst { base URL } = require（& # 39；。/config & # 39；）//定义默认参数constdefaultoptions = {data: {}，ignoretoken: false，form: false，}/* * *发送请求* @params * method:请求方法:POST/GET * url:请求路径* data:请求参数* ignoreToken:是否忽略令牌验证* form:是否使用formData请求*/函数请求（options）{ let _ options = object . assign（default options，options）let { method，url，data，ignoretoken，Form } = _ options const app = GET app 65content -type & # 39；: 'application/x-www -form -urlencoded & # 39；} } else { header = { & # 39content -type & # 39；: '应用程序/JSON & # 39；//用户定义的请求头信息}} if（！ignore token）{//Get token let token = app . global data . token header . authorization = ` bearer $ { token } ` } Return New Promise（（resolve，reject）=》{ wx . request（{ URL:base URL+URL，data，header，method，success:（RES）=》{ let { status code:code } = RES if（code = = = status code。成功）{ if（RES . data . code！= = 0）{//show toast（RES . data . error msg）reject（RES . data）return } resolve（RES . data）} else if（code = = = status code。过期）{ app . global data . token = & # 39；'Show toast（‘登录已过期，请刷新页面‘）Reject（RES . data）} else { Show toast（‘请求错误${url}，代码:$ { CODE } `）Reject（RES . data）} }，fail:（err）=》{ console . log（& # 39；% c err & # 39, '颜色:红色；font -weight:bold & # 39；，呃）显示吐司（呃。errmsg）reject（err）}）}//封装toast函数function show toast（title，icon = & # 39无& # 39；，duration=2500，mask = false）{ wx . show toast（{ title:title | | & # 39；'，图标，持续时间，掩码}）；} function get（options）{ return request（{ method:& # 39；GET & # 39,...options }）}函数post（options）{//URL，data = {}，ignoreToken，表单返回请求（{ method:& # 39；邮政& # 39；,...选项}）}模块。exports = {request，get，post}使用方法新建一个文件，创建一个api文件（这里以order接口为例），创建一个api/index.js（接口分发统一处理，防止接口太长而无法写入同一个文件中）。目录结构如下:

。├-config.js//Configuration│├-api项的相关请求、请求API等。│ ├── index.js //统一处理门户│├───────订单界面│├──request.js//Encapsulate主要功能│├──────────────────────────...。/request & # 39；）module.exports = {//数据可以传入URL，data，ignoretoken，form，CTO ken API name（data）{ let URL = & # 39；apiUrl & # 39退货请求。post（{ URL，data }）} }统一分发接口const orderapi = require（。/order“）模块。exports = {orderapi}页面引用const { orderApi } = require（& # 39；目录/路径/API/索引& # 39；1.` promise . then（）` chain call func（）{ orderapi。apiname（参数）。然后（RES =》{//do something }）。catch（err =》{//do something }）} 2。` async/await ` calls async func（）{ try { let RES = awaitordeapi . apiname（params）//do something } catch（err）{/do something } } Options参数表示数据类型url接口名称字符串的默认值“”数据请求正文对象{}ignoreToken请求是否携带tokenBooleanfalseform是否为表单请求Booleanfalse【相关学习推荐:小程序开发教程】

这就是本机applet封装请求并优雅地调用接口的方式。更多详情请关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 如何实现小程序发送服务通知（小程序如何主动向用户发送通知）
• 如何获取小程序的unionid（如何获取小程序的页面路径）
• 生成海报的示例小程序（Java后端）（微信小程序生成海报演示）
• 什么是小程序？ 有哪些功能？（什么是小程序？有哪些功能？）
• 介绍如何用小程序生成参数二维码（二维码+小程序参数）

本文由主机参考刊发，转载请注明：原生小程序如何优雅地封装请求和调用接口？ https://zhujicankao.com/105820.html