request.js封装

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

相关问题

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

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

封装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 }),
};

在其他文件中导入并使用:
在你需要发起网络请求的地方，如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

封装 Axios 请求工具 request.js
为了简化 HTTP 请求操作并统一处理请求和响应，通常会创建一个名为 request.js 的文件来封装 Axios。此文件不仅配置了 Axios 的默认设置（如基础 URL 和超时），还实现了请求与响应拦截器的功能。
创建 request.js 文件
以下是实现上述功能的一个具体例子：
// src/utils/request.js
import axios from 'axios';

const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // API base_url
timeout: 5000 // 请求超时时长 (ms)
});

// 添加请求拦截器
service.interceptors.request.use(
config => {
// 在发送请求之前做些什么
const token = localStorage.getItem('token');

if(token){
// 让每个请求携带自定义 token 请根据实际情况自行修改
config.headers['Authorization'] = `Bearer ${token}`;
}
return config;
},
error => {
// 对请求错误做些什么
Promise.reject(error);
}
);

// 添加响应拦截器
service.interceptors.response.use(
response => {
// 对响应数据做点什么
return response.data;
},
error => {
// 对响应错误做点什么
console.log(`err${error}`); // 输出错误日志至控制台
return Promise.reject(error);
}
);

export default service;

这段代码展示了如何利用 Axios 进行简单的封装[^1]。它设置了全局的基础路径、超时时间和请求头中的 Token 字段，并且分别针对请求和响应进行了预处理。
对于具体的 API 接口调用，在其他业务逻辑模块中只需要简单地引入这个封装后的实例即可轻松发起各种类型的 HTTP 请求，而无需重复书写相同的配置项。