如何在uniapp-vue3-ts项目中封装api请求并且能在H5页面打印出来,get请求和post请求，能解决跨域问题

在uniapp-vue3-ts项目中封装API请求，并在H5页面打印出来，可以按照以下步骤进行： 1. 创建一个专门的文件夹用于存放API封装，例如`src/api`，在该文件夹下创建一个`index.ts`文件。 2. 在`index.ts`文件中，使用`axios`库来创建一个请求实例，并配置请求的基础URL，同时处理跨域问题。例如，如果你的后端服务支持CORS（跨源资源共享），可以直接在请求中设置`withCredentials: true`来发送Cookie。 ```typescript // src/api/index.ts import axios from 'axios'; const service = axios.create({ baseURL: 'http://your-backend-api.com/api', // 设置统一的基础URL timeout: 5000 // 请求超时时间 }); // 请求拦截器 service.interceptors.request.use( config => { // 可以在这里添加请求头，比如token等 return config; }, error => { // 请求错误处理 console.error('Request Error:', error); return Promise.reject(error); } ); // 响应拦截器 service.interceptors.response.use( response => { const res = response.data; // 根据业务处理不同的响应状态码 if (res.code !== 200) { // 可以在这里处理错误状态码的情况，比如弹框提示 console.error('Response Error:', res.message); return Promise.reject(res.message || 'Error'); } else { return res; } }, error => { // 响应错误处理 console.error('Response Error:', error); return Promise.reject(error); } ); export default service; ``` 3. 定义GET和POST请求的函数。例如： ```typescript // src/api/index.ts // ...上面的代码 // GET请求示例 export function getSomeData(params: any) { return service.get('/some-data', { params }); } // POST请求示例 export function postSomeData(data: any) { return service.post('/some-data', data); } ``` 4. 在H5页面中使用这些封装好的API函数。在组件的`onMounted`钩子中调用API，并打印结果。 ```typescript // 例如在某个页面组件中 <template>  </template> <script lang="ts"> import { defineComponent } from 'vue'; import { getSomeData } from '@/api'; export default defineComponent({ name: 'SomePage', setup() { onMounted(async () => { try { const { data } = await getSomeData(); console.log('GET Response:', data); } catch (error) { console.error('GET Error:', error); } }); } }); </script> ``` 5. 对于跨域问题，如果后端服务没有设置CORS来允许跨域请求，你可能需要在uniapp项目配置中设置代理转发，或者在服务器上配置CORS。

阅读全文

如何在uniapp-vue3-ts项目中封装api请求并且能在H5页面打印出来,get请求和post请求，能解决跨域问题

大家在看

TXT文件合并器一款合并文本文件的工具

Scratch语言教程&案例&相关项目资源

Xilinx 7系列FPGA手册[打包下载]

filter LTC1068 模块AD设计 Altium设计 硬件原理图+PCB文件.rar

谐响应分析步骤-ANSYS谐响应分析

最新推荐

Vue3项目打包后部署到服务器 请求不到后台接口解决方法

vue项目中axios请求网络接口封装的示例代码

在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法

解决vue2中使用axios http请求出现的问题

VUE axios发送跨域请求需要注意的问题

cc65 Windows完整版发布：6502 C开发工具

【CLIP模型实战】：从数据预处理到代码实现的图文相似度计算完全指南

车载以太网doip协议格式

JavaScript中文帮助手册：初学者实用指南

深入理解MySQL存储引擎：InnoDB与MyISAM的终极对决

filter LTC1068 模块AD设计 Altium设计硬件原理图+PCB文件.rar

Vue3项目打包后部署到服务器请求不到后台接口解决方法