首先,我们需要安装Axios。可以使用npm或yarn来完成这一步骤:
npm install axios
// 或者
yarn add axios
然后,在项目中创建一个名为"api.js"(也可以根据需求自定义名称)的文件,并将以下代码添加到文件中:
import axios from 'axios';
// 创建一个 Axios 实例
const instance = axios.create({
// 指定基础 URL
baseURL: 'http://api',
// 设置请求超时时间
timeout: 5000,
});
// 在请求发出之前的拦截器中进行一些操作
instance.interceptors.request.use(
config => {
// 如果用户已登录,则将其令牌添加到请求头中
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
// 设置 Accept 请求头为 application/json
config.headers.Accept = 'application/json';
return config;
},
error => {
// 对请求错误做些什么
return Promise.reject(error);
}
);
// 在收到响应后的拦截器中进行一些操作
instance.interceptors.response.use(
// 对成功响应进行处理
response => {
// 获取响应数据
const data = response.data;
// 如果响应状态码为 200 并且响应数据中的 code 属性为 0,则表示请求成功
if (response.status === 200 && data.code === 0) {
// 返回响应数据中的 data 属性
return data.data;
} else {
// 否则返回包含错误信息的 Promise 对象
return Promise.reject(data.message || '未知错误');
}
},
// 对响应错误进行处理
error => {
// 返回一个包含错误信息的 Promise 对象
return Promise.reject(error);
}
);
// 导出 Axios 实例
export default instance;
在上述代码中,我们首先导入了Axios库,然后创建了一个实例。在此实例中,我们设置了API基本URL和请求超时时间。接着,我们使用拦截器来处理请求和响应,以便在发送请求之前或收到响应后对其进行必要的处理。
在请求拦截器中,我们首先从本地存储中获取用户令牌,并将其添加到请求头中(如果存在)。然后,我们设置了"Accept"请求头为"application/json",以表明我们希望接收JSON格式的数据。
在响应拦截器中,我们首先检查响应状态码是否为200,并且响应数据中的"code"属性是否为0。如果满足这些条件,我们返回响应数据中的"data"属性;否则,我们返回一个包含错误信息的Promise对象。
现在我们可以在整个应用程序中使用这个API模块,例如:
import api from './api.js';
api.get('/user/12345')
.then(response => {
console.log(response);
})
.catch(error => {
console.error(error);
});
在上述代码中,我们首先导入了我们刚刚创建的API模块,然后使用该模块的get方法发送请求。如果请求成功,我们会在控制台上输出响应数据;否则,我们会在控制台上输出错误。