帮我用axios封装一个request.js

好的，我可以回答这个问题。以下是一个简单的axios封装的request.js示例：

import axios from 'axios';

const request = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
});

request.interceptors.request.use(
  (config) => {
    // 在请求发送之前做一些处理
    return config;
  },
  (error) => {
    // 处理请求错误
    return Promise.reject(error);
  }
);

request.interceptors.response.use(
  (response) => {
    // 在响应数据之前做一些处理
    return response.data;
  },
  (error) => {
    // 处理响应错误
    return Promise.reject(error);
  }
);

export default request;

这个request.js文件使用axios创建了一个实例，并添加了请求和响应拦截器。在请求拦截器中，我们可以在请求发送之前做一些处理，比如添加请求头信息。在响应拦截器中，我们可以在响应数据之前做一些处理，比如解析响应数据。最后，我们将这个实例导出，以便在其他地方使用。

相关问题

如何将axios进行封装在一个request.js文件中将request.js文件导入到api文件夹中

将Axios封装在`request.js`文件中并导入到其他文件，可以使代码更具模块性和复用性。以下是一般的步骤：

1. **封装axios**:
创建一个名为`request.js`的文件，比如在`src/api`目录下：

// request.js
import axios from 'axios';

const service = axios.create({
  baseURL: process.env.BASE_API_URL, // API基础地址
  timeout: 5000, // 请求超时时间
  withCredentials: true, // 如果涉及到跨域请求，设置为true
  headers: {
    'Content-Type': 'application/json',
  },
});

service.interceptors.request.use(
  config => {
    // 在发送每个请求前添加token验证（如果需要）
    // 这里只是一个例子，实际应用可能会检查登录状态
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  error => Promise.reject(error)
);

export default {
  get: (url, params) => service.get(url, { params }),
  post: (url, data) => service.post(url, data),
  put: (url, data) => service.put(url, data),
  delete: (url, params) => service.delete(url, { params }),
};

2. **在其他文件中导入并使用**:
在你需要发起网络请求的地方，如`src/api/user.js`:

import { get, post, put, delete } from '../request'; // 引入request.js

export async function fetchData() {
  try {
    const response = await get('/users');
    // ... 对响应进行操作
  } catch (error) {
    console.error(error);
  }
}

这样，所有对网络的访问都在`request.js`文件中统一管理，提高了代码的可维护性和一致性。

统一封装axios request.js

在上面的引用中，可以看到在services目录下新建了一个名为request.js的文件，这是一个用于统一封装axios的文件。在该文件中，首先引入了Vue和request模块，并导入了apiUrl模块。然后通过Object.entries方法遍历apiUrl对象，生成了对应的接口方法并挂载到services对象上。最后，通过Object.defineProperty方法将services对象挂载到了Vue的原型上，使得在Vue实例中可以通过this.$services来调用这些接口方法。

具体使用封装好的request请求的方法如下：

1. GET请求：
使用方法为this.$services.apiAuthList({ method: 'get', params: { orgId: this.paramsInfo.orgId, creditId: this.paramsInfo.creditId } }).then(res => {})

2. POST请求：
使用方法为this.$services.apiAuthCustomerSave({ method: 'post', data: { orgId: this.paramsInfo.orgId, creditId: this.paramsInfo.creditId } }).then(res => {})

3. 带参数的DELETE请求：
使用方法为this.$services.apiShippingDel({ method: "delete" },{ id: row.id }).then(res => {})

在以上代码中，通过this.$services调用了对应的接口方法，并传入请求参数。在.then()中可以处理接口返回的数据。

这样，你就可以通过统一封装的request.js文件中的接口方法来方便地发送不同类型的请求了。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>