uniapp微信小程序请求后端接口方法封装
时间: 2025-07-06 20:48:25 浏览: 3
### 封装请求后端接口的方法
为了提升开发效率并简化代码结构,在UniApp中封装请求后端接口是一个常见的做法。这不仅有助于减少重复代码,还能使错误处理更加集中化。
#### 创建API工具类
创建`api.js`文件作为全局使用的HTTP客户端库,用于定义所有对外部服务的调用逻辑:
```javascript
// src/api/api.js
import axios from 'axios';
const service = axios.create({
baseURL: "https://example.com", // 设置默认的基础URL
timeout: 5000 // 请求超时时间设置为5秒
});
service.interceptors.request.use(
config => {
const token = uni.getStorageSync('token');
if (token) {
config.headers['Authorization'] = `Bearer ${token}`;
}
return config;
},
error => Promise.reject(error)
);
export default class ApiClient {
static async get(url, params={}) {
try {
let response = await service.get(url, {params});
return response.data;
} catch (error) {
throw new Error(`GET request failed with url:${url}, message:${JSON.stringify(error.message)}`);
}
}
static async post(url, data={}, headers={}) {
try {
let response = await service.post(url, data, {headers});
return response.data;
} catch (error) {
throw new Error(`POST request failed with url:${url}, message:${JSON.stringify(error.message)}`);
}
}
}
```
此部分实现了基本的GET和POST请求方法,并加入了简单的Token认证支持[^4]。
#### 使用自定义API函数
当需要执行具体的网络操作时,可以在业务组件内部引入上述定义的服务层对象来发起请求:
```javascript
<script>
import api from '@/api/api';
export default {
methods: {
fetchData() {
api.get('/data').then((res)=>{
console.log(res);
}).catch(err=>{
console.error(err);
});
},
submitForm(formData){
api.post('/submit', formData).then((res)=>{
console.log(res);
}).catch(err=>{
console.error(err);
});
}
}
};
</script>
```
以上展示了如何利用之前构建好的ApiClient来进行数据获取与表单提交的操作[^5]。
阅读全文
相关推荐


















