如何在uniapp-vue3-ts项目中封装api请求并且能在H5页面打印出来,get请求和post请求,能解决跨域问题
时间: 2024-09-07 13:05:06 浏览: 69
在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。
阅读全文