uniapp封装网络请求以及拦截器

### 封装 UniApp 网络请求 #### 使用 `uni.addInterceptor` 和 `uni.request` 在 UniApp 中，通过使用 `uni.addInterceptor` 可以拦截所有的网络请求和响应，从而实现全局配置、日志记录等功能。这有助于简化代码逻辑并提高可维护性[^2]。 ```javascript // 定义一个通用的请求拦截器 uni.addInterceptor('request', { invoke(args) { console.log('Request Start:', args); // 添加公共参数或设置默认header等操作 Object.assign(args.header || (args.header = {}), { 'Content-Type': 'application/json', Authorization: uni.getStorageSync('token') || '' }); }, success(result) { console.log('Response Success:', result); }, fail(err) { console.error('Response Fail:', err); } }); ``` #### 创建自定义 Request 函数 为了进一步优化开发体验，建议创建一个独立文件来管理所有 API 接口调用。下面是一个简单的例子展示如何构建这样的模块： ```javascript // api/index.js import { baseURL } from '../config'; // 假设这里存储了一些常量配置项 const request = async function(options){ try{ let res = await uni.request({ ...options, url : `${baseURL}${options.url}`, header:{ ...(options.header||{}) } }) return Promise.resolve(res[1].data); }catch(e){ throw new Error(`Network error:${e.message}`); } } export default request; ``` 在此基础上，可以根据业务需求扩展更多功能，比如统一处理不同状态码的情况、加入loading动画显示/隐藏等等[^3]。 对于具体的接口定义，则可以在其他js文件中引入此基础方法，并传入特定路径和其他选项完成实际的数据交互过程[^4]。 ```javascript // api/user.js import request from './index'; export const login = ({ username, password }) => { return request({ url: '/login', method: 'POST', data: { username, password } }); }; export const registerUser = ({ username, email, password }) => { return request({ url: '/register', method: 'POST', data: { username, email, password } }); }; ``` 以上就是关于如何在 UniApp 中封装网络请求的一些最佳实践介绍以及相应的示例代码[^1]。

Uniapp封装请求拦截可以使用uni-app提供的拦截器功能，具体步骤如下： 1. 在common目录下新建一个request.js文件，用于封装请求拦截器。 2. 在request.js文件中定义一个request拦截器，并在其中添加请求头、请求参数等信息。示例代码如下： ``` import Vue from 'vue' import axios from 'axios' import qs from 'qs' axios.defaults.baseURL = 'http://localhost:8080/' axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8' // 添加请求拦截器 axios.interceptors.request.use( config => { // 在发送请求之前做些什么 if (config.method === 'post') { config.data = qs.stringify(config.data) } return config }, error => { // 对请求错误做些什么 return Promise.reject(error) } ) export default axios ``` 3. 在main.js文件中引入request.js文件，并将其挂载到Vue原型链上。示例代码如下： ``` import Vue from 'vue' import App from './App' import request from './common/request' Vue.config.productionTip = false // 将request挂载到Vue原型链上 Vue.prototype.$request = request App.mpType = 'app' const app = new Vue({ ...App }) app.$mount() ``` 4. 在需要请求数据的组件中，使用this.$request来发送请求即可。示例代码如下： ``` export default { data () { return { dataList: [] } }, mounted () { this.getDataList() }, methods: { async getDataList () { try { const res = await this.$request.get('/api/list') this.dataList = res.data } catch (error) { console.log(error) } } } } ``` 这样，我们就完成了Uniapp封装请求拦截的过程。通过这种方式，我们可以在全局范围内添加请求头、请求参数等信息，从而方便地进行请求处理。