uniapp中axios封装和环境配置

**UniApp 中 Axios 封装和环境配置**

在 UniApp 开发中，Axios 是一个非常常用的 HTTP 请求库。然而，在实际项目中，我们往往需要对 Axios 进行封装，以便更好地管理请求逻辑、错误处理等方面。在本文中，我们将介绍如何在 UniApp 中使用 Axios 封装，并进行环境配置。

### 一、Axios 封装首先，我们需要创建一个 Axios 封装文件，例如 `utils/request.js`：

javascript// utils/request.jsimport axios from 'axios';

const service = axios.create({
 baseURL: process.env.VUE_APP_API_URL, // API 请求的域名 timeout:5000, // 请求超时时间});

service.interceptors.push({
 // 添加请求拦截器 requestInterceptor(config) {
 if (config.url.includes('login')) return config;
 const token = uni.getStorageSync('token');
 if (token) {
 config.headers['Authorization'] = `Bearer ${token}`;
 }
 return config;
 },
});

service.interceptors.push({
 // 添加响应拦截器 responseInterceptor(response) {
 if (response.data.code ===200) {
 return response.data;
 } else {
 uni.showToast({ title: '错误', icon: 'none' });
 return Promise.reject(response.data);
 }
 },
});

export default service;

在上述代码中，我们首先导入 Axios，并创建一个 Axios 实例。然后，我们添加了两个拦截器：请求拦截器和响应拦截器。

* 请求拦截器用于在每次发送请求之前进行一些操作，例如设置 Authorization 头部。
* 响应拦截器用于处理服务器返回的数据，例如检查是否为200 状态码，并显示错误提示。

### 二、环境配置接下来，我们需要在 `main.js` 文件中进行环境配置：

javascript// main.jsimport Vue from 'vue';
import App from './App.vue';
import store from './store';
import axios from 'axios';
import request from './utils/request';

Vue.config.productionTip = false;

new Vue({
 render: (h) => h(App),
}).$mount('#app');

// 环境配置const envConfig = {
 dev: {
 API_URL: ' /> },
 prod: {
 API_URL: ' /> },
};

const currentEnv = process.env.NODE_ENV;
const config = envConfig[currentEnv];

if (config) {
 Object.keys(config).forEach((key) => {
 Vue.prototype[key] = config[key];
 });
}

// axios 配置axios.defaults.baseURL = Vue.prototype.API_URL;

export default request;

在上述代码中，我们首先导入 Vue、App 组件和 store。然后，我们导入 Axios 和我们的 Axios 封装文件。

接下来，我们进行环境配置，根据当前环境（dev 或 prod）设置 API 请求的域名，并将其挂载到 Vue 的原型链上。

最后，我们使用 Axios 默认的 baseURL 配置项来设置请求的域名。

### 三、示例代码下面是一个示例代码片段：

javascript// pages/index.jsimport request from '../../utils/request';

Page({
 data: {
 count:0,
 },

 async onLoad() {
 const res = await request.get('/api/count');
 this.setData({ count: res.data });
 },
});

在上述代码中，我们使用我们的 Axios 封装文件来发送 GET 请求，并将响应数据设置到页面的 data 中。

### 四、总结本文介绍了如何在 UniApp 中使用 Axios 封装，并进行环境配置。我们首先创建了一个 Axios 封装文件，添加了请求拦截器和响应拦截器。然后，我们在 `main.js` 文件中进行环境配置，根据当前环境设置 API 请求的域名，并将其挂载到 Vue 的原型链上。

最后，我们使用示例代码片段展示了如何在页面中使用我们的 Axios 封装文件来发送请求并处理响应数据。