Taro@3.x+Vue@3.x+TS开发微信小程序,网络请求封装

news/2024/11/16 9:37:02/

参考文档

  • Taro.request(option)

src/http 下创建 request.ts, 写入如下配置:

import Taro from '@tarojs/taro'
import { encryptData } from './encrypt'console.log('NODE_ENV', process.env.NODE_ENV)
console.log('TARO_APP_PROXY', process.env.TARO_APP_PROXY)
const baseUrl = process.env.TARO_APP_PROXYinterface RequestParams {url: stringmethod: 'OPTIONS'|'GET'|'HEAD'|'POST'|'PUT'|'PATCH'|'DELETE'|'TRACE'|'CONNECT'data: anyheader?: anytimeout?: numberloadingTitle?: string[key: string]: any
}
export function request (params: RequestParams) {const { url, method, data, header, args: { timeout = 6000, loadingTitle = '' } } = paramsTaro.showLoading({title: loadingTitle,mask: true})return new Promise((resolve, reject)=>{Taro.request({data: encryptData(data, method),url: baseUrl + url,method: method,timeout: timeout,header: {'content-type': 'application/json;charset=UTF-8,text/plain,*/*',...header},success: (res) => { // 接口调用成功的回调函数console.log('success', res)// 具体根据后端接口返回数据接口进行resolve和rejectif (res.data.message.code === 0) {resolve(res.data.data)} else {console.log('message', res.data.message.message)showError(res.data.message.message)reject({ message: res.data.message.message })}},fail: (res) => {console.log('fail', res)showError('请求失败')reject({ fail: res })},complete: (res: any) => { // 接口调用结束的回调函数(调用成功、失败都会执行)console.log('complete', res)Taro.hideLoading()}}).catch(e => {console.log('catch err', e)showError(e.errMsg)})})
}
function showError (message: string) {Taro.showToast({title: message,icon: 'none', // 'error' 'success' 'loading' 'none'duration: 2000})
}

src/http 下创建 index.ts 并导出通用请求:

import { request } from '@/http/request'export function getAction (url: string, parameter: any, args = {}) {return request({url: url,method: 'GET',data: parameter,args: args})
}
export function postAction (url: string, parameter: any, args = {}) {return request({url: url,method: 'POST',data: parameter,args: args,header: {'Content-Type': 'application/x-www-form-urlencoded'}})
}

在页面内进行网络请求

<script setup lang="ts">
import { ref } from 'vue'
import Taro, { useLoad, usePullDownRefresh } from '@tarojs/taro'
import { getAction } from '@/http/index'const url = {detail: '/api/detail'
}
const detailData = ref()
useLoad(() => {getDetail()
})
usePullDownRefresh(async () => {await getDetail()Taro.stopPullDownRefresh()
})
function getDetail () {getAction(url.detail, { id: 1 }).then((res: any) => {console.log('detail', res)detailData.value = res.data}).catch((err) => {console.log('err', err)})
}
</script>

http://www.ppmy.cn/news/1456111.html

相关文章

应用分层和企业规范

目录 一、应用分层 1、介绍 &#xff08;1&#xff09;为什么需要应用分层&#xff1f; &#xff08;2&#xff09;如何分层&#xff1f;&#xff08;三层架构&#xff09; MVC 和 三层架构的区别和联系 高内聚&#xff1a; 低耦合&#xff1a; 2、代码重构 controlle…

R-Tree原理及实现代码

R-Tree 原理 R-Tree&#xff08;也称为R树或R*树&#xff09;是一种空间索引数据结构&#xff0c;用于存储多维空间中的对象&#xff0c;如二维空间中的点和多边形。R-Tree 最初由 Antonin Guttman 在 1984 年提出&#xff0c;它解决了 B-Tree 和其变种在空间数据索引中的不足…

Python使用割圆法求π值

三国时期刘徽提出的割圆法有多牛掰&#xff0c;看这个&#xff1a;刘徽割圆术到底做了什么&#xff1f; - 知乎 用Python实现的该算法代码如下&#xff1a; #!/usr/bin/env python """使用割圆法计算π值Usage::$ python calc_circle_pi.py 20 # 参数20是迭代…

最适合程序员的浏览器翻译插件——简约翻译!

1.支持功能 划词翻译&#xff08;读音、解释、词性全都有&#xff0c;还可收藏词汇&#xff09; 网页双语对照翻译 YouTube字幕翻译 输入框翻译 鼠标悬停翻译 2.自定义翻译规则 规则订阅/规则分享 自定义专业术语 3.自定义快捷键 AltQ 开启翻译 Alt…

Mysql 行格式 DYNAMIC 和 COMPACT 区别

MySQL的InnoDB存储引擎提供了多种行格式&#xff0c;其中DYNAMIC和COMPACT是两种常见的选择。这两种行格式在处理数据时有一些关键的区别&#xff0c;尤其是在管理大字段&#xff08;如BLOB、TEXT和大的VARCHAR字段&#xff09;方面。以下是DYNAMIC和COMPACT行格式的主要区别&a…

类和对象-Python-第一部分

初识对象 使用对象组织数据 class Student:nameNonegenderNonenationalityNonenative_placeNoneageNonestu_1Student()stu_1.name"林军杰" stu_1.gender"男" stu_1.nationality"中国" stu_1.native_place"山东" stu_1.age31print(stu…

C++进阶之路:何为引用、内联函数、auto与指针空值nullptr关键字

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…

森林消防泵操作指南:守护绿色的必备技能/恒峰智慧科技

在广袤无垠的森林中&#xff0c;每一片绿叶都承载着生命的希望。然而&#xff0c;当火焰无情地吞噬这片生机时&#xff0c;我们需要一种强大的力量来与之抗衡。这时&#xff0c;森林消防泵便成为了我们的守护者&#xff0c;掌握其操作技巧&#xff0c;更是每一位热爱大自然者的…