react你如何使用axios
安装 axios
在 React 项目中使用 axios 前，需要先安装它。可以通过 npm 或 yarn 安装：
npm install axios或
yarn add axios引入 axios
在需要使用 axios 的组件中引入它：
import axios from 'axios';发起 GET 请求
使用 axios 发起 GET 请求获取数据：
axios.get('https://api.example.com/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Error fetching data:', error);
});发起 POST 请求
使用 axios 发起 POST 请求发送数据：
axios.post('https://api.example.com/data', { key: 'value' })
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Error posting data:', error);
});使用 async/await
可以使用 async/await 语法简化异步请求的处理：
async function fetchData() {
try {
const response = await axios.get('https://api.example.com/data');
console.log(response.data);
} catch (error) {
console.error('Error fetching data:', error);
}
}全局配置
可以设置 axios 的全局配置，例如 baseURL 或 headers：
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = 'Bearer token';创建实例
可以创建自定义的 axios 实例，用于不同的 API 端点：
const api = axios.create({
baseURL: 'https://api.example.com',
timeout: 5000,
});
api.get('/data')
.then(response => {
console.log(response.data);
});拦截请求和响应
可以使用拦截器在请求或响应被处理前进行统一操作：
axios.interceptors.request.use(config => {
console.log('Request sent:', config);
return config;
});
axios.interceptors.response.use(response => {
console.log('Response received:', response);
return response;
});取消请求
可以使用 CancelToken 取消正在进行的请求：
const source = axios.CancelToken.source();
axios.get('https://api.example.com/data', {
cancelToken: source.token
})
.then(response => {
console.log(response.data);
})
.catch(error => {
if (axios.isCancel(error)) {
console.log('Request canceled:', error.message);
} else {
console.error('Error fetching data:', error);
}
});
// 取消请求
source.cancel('Request canceled by user');
