首页uniappx封装请求

uniappx封装请求

时间: 2025-02-03 08:03:06 浏览: 43

在uni-app中，为了简化网络请求操作并提高代码复用性，通常会将axios或类似的HTTP客户端库进行封装。这被称为“封装请求”。以下是一个基本的步骤： 1. **创建封装工具**：首先，在项目的某个公共文件夹如`utils/http.js`，创建一个单独的模块来封装axios： ```javascript import axios from 'axios'; const service = axios.create({ baseURL: process.env.BASE_URL, // 设置基础URL timeout: 5000, // 设置超时时间 // 添加跨域、headers、token认证等配置 }); service.interceptors.request.use( config => { // 在发送请求前做些事情，比如添加token if (process.env.NODE_ENV === 'production') { config.headers.Authorization = 'Bearer ' + localStorage.getItem('token'); } return config; }, error => { // 对请求错误进行处理 return Promise.reject(error); } ); service.interceptors.response.use( response => { // 对服务器成功响应的数据进行处理 return response.data; }, error => { // 对服务器错误响应进行处理 if (error.response.status) { switch (error.response.status) { case 401: // 处理未授权的情况 break; default: console.error('Error:', error.response.data); } } else { console.error('Error', error.message); } return Promise.reject(error); } ); export default { request: service.request, get: service.get, post: service.post, ... }; ``` 2. **在组件中调用**：然后，在需要发送请求的地方，可以直接使用导出的对象进行操作： ```vue <template> <button @click="getUser">获取用户</button> </template> <script> import { getUser } from '@/utils/http'; export default { methods: { getUser() { this.$http.get('/users/me').then(response => { console.log(response); }).catch(error => { console.error(error); }); } } }; </script> ```

阅读全文