axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 node.js。它支持拦截请求和响应、转换请求和响应数据、取消请求等功能。以下是 axios 的基本使用方法：
- 安装 Axios
在项目中使用 axios，首先需要安装它：
使用 npm 安装：
npm install axios
使用 CDN 引入：
如果你是在浏览器中使用，可以通过 CDN 引入：
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
- 基本用法
发送 GET 请求
// 使用 axios.get 方法
axios.get('https://api.example.com/data')
.then(response => {
console.log(response.data); // 打印响应数据
})
.catch(error => {
console.error('Error:', error);
});
// 或者使用 axios 直接发送请求
axios({
method: 'get',
url: 'https://api.example.com/data'
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Error:', error);
});
发送 POST 请求
axios.post('https://api.example.com/data', {
name: 'John Doe',
age: 30
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Error:', error);
});
- 配置请求
axios 支持多种配置选项，例如设置请求头、超时时间等。
设置请求头
axios.get('https://api.example.com/data', {
headers: {
'Authorization': 'Bearer your_token_here',
'Content-Type': 'application/json'
}
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Error:', error);
});
设置超时时间
axios.get('https://api.example.com/data', {
timeout: 5000 // 5秒超时
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Error:', error);
});
- 使用 Axios 实例
你可以创建一个自定义的 axios 实例，以便在多个地方复用相同的配置。
const api = axios.create({
baseURL: 'https://api.example.com',
timeout: 5000,
headers: {
'Authorization': 'Bearer your_token_here'
}
});
// 使用自定义实例发送请求
api.get('/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Error:', error);
});
- 拦截器
axios 提供了拦截器功能，可以在请求发送前或响应返回后进行处理。
添加请求拦截器
axios.interceptors.request.use(config => {
// 在发送请求之前做些什么
console.log('Request sent:', config.url);
return config;
}, error => {
// 对请求错误做些什么
return Promise.reject(error);
});
添加响应拦截器
axios.interceptors.response.use(response => {
// 对响应数据做些什么
console.log('Response received:', response.status);
return response;
}, error => {
// 对响应错误做些什么
console.error('Response error:', error);
return Promise.reject(error);
});
- 错误处理
axios 的错误对象包含很多有用的信息，例如 error.message、error.response 等。
axios.get('https://api.example.com/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
if (error.response) {
// 服务器响应了，但状态码不是 2xx
console.error('Status:', error.response.status);
console.error('Data:', error.response.data);
} else if (error.request) {
// 请求发送了，但没有收到响应
console.error('No response received');
} else {
// 请求配置错误
console.error('Error:', error.message);
}
});
- 取消请求
你可以使用 CancelToken 或 AbortController 来取消请求。
使用 CancelToken
const source = axios.CancelToken.source();
axios.get('https://api.example.com/data', {
cancelToken: source.token
})
.catch(error => {
if (axios.isCancel(error)) {
console.log('Request canceled:', error.message);
} else {
console.error('Error:', error);
}
});
// 取消请求
source.cancel('Operation canceled by the user');
使用 AbortController (现代浏览器)
const controller = new AbortController();
const signal = controller.signal;
axios.get('https://api.example.com/data', {
signal: signal
})
.catch(error => {
if (error.name === 'AbortError') {
console.log('Request aborted');
} else {
console.error('Error:', error);
}
});
// 取消请求
controller.abort();
总结
axios 是一个功能强大的 HTTP 客户端，适合在现代 JavaScript 项目中使用。你可以根据需要配置请求、处理响应、添加拦截器、取消请求等。希望这些示例能帮助你快速上手！