uni-app封装request请求：Vue3+TS最佳实践

{"title":"uni-app封装request请求：Vue3+TS最佳实践","description":"本文介绍如何在uni-app项目中使用Vue3+TS封装request请求，实现网络请求的统一管理，提高代码复用性，并方便维护和扩展。","keywords":"uni-app, request, 封装, vue3, typescript, 网络请求, 代码复用性, 维护, 扩展","content":"在uni-app中封装request请求可以按照以下步骤进行：\n\n1. 在uni-app项目中创建一个api文件夹，用于存放网络请求相关的文件。\n\n2. 在api文件夹中创建一个request.ts文件，用于封装网络请求的函数。\n\ntypescript\n// api/request.ts\n\nimport { uniRequest } from '@/utils/uniRequest';\n\n// 封装get请求\nexport function get(url: string, params: any) {\n return uniRequest({\n url,\n method: 'GET',\n data: params\n });\n}\n\n// 封装post请求\nexport function post(url: string, data: any) {\n return uniRequest({\n url,\n method: 'POST',\n data\n });\n}\n\n\n3. 在utils文件夹中创建一个uniRequest.ts文件，用于封装uni-app的网络请求方法。\n\ntypescript\n// utils/uniRequest.ts\n\nexport function uniRequest(config: any) {\n return new Promise((resolve, reject) => {\n uni.request({\n url: config.url,\n method: config.method,\n data: config.data,\n header: {\n 'Content-Type': 'application/json',\n },\n success: (res) => {\n resolve(res.data);\n },\n fail: (err) => {\n reject(err);\n },\n });\n });\n}\n\n\n4. 在需要使用网络请求的地方，引入api/request.ts文件，并调用相应的请求方法。\n\ntypescript\n// 在某个组件中使用网络请求\n\nimport { get, post } from '@/api/request';\n\nexport default {\n methods: {\n async fetchData() {\n try {\n const res = await get('/api/data', { id: 1 });\n console.log(res);\n } catch (error) {\n console.error(error);\n }\n },\n },\n};\n\n\n这样就完成了uni-app中封装request请求的过程。通过封装后，可以在项目中统一管理网络请求，提高代码复用性，并且方便进行后续的维护和扩展。"}