uniapp微信小程序请求后端接口方法封装

### 封装请求后端接口的方法 为了提升开发效率并简化代码结构，在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]。