request.js封装

request.js是一个用于封装HTTP请求的文件。它使用axios库创建了一个axios实例，并对请求和响应进行了拦截处理。在请求拦截器中，可以对请求进行一些处理，例如添加请求头。而在响应拦截器中，可以统一处理接口返回的结果，例如将字符串数据转为JSON格式。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>