在Vue中，axios是一个非常流行的HTTP客户端，用于发送HTTP请求。以下是关于axios的详细介绍，包括核心用法、封装以及个性化配置。
核心用法
安装axios
npm install axios
发送GET请求
import axios from 'axios';
axios.get('https://api.example.com/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
发送POST请求
axios.post('https://api.example.com/data', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
封装axios
为了复用和维护方便，我们可以封装axios。
创建一个axios实例
import axios from 'axios';
const http = axios.create({
baseURL: 'https://api.example.com',
timeout: 1000,
// 其他配置...
});
封装请求方法
http.interceptors.request.use(config => {
// 可以在这里添加例如token等配置
return config;
}, error => {
return Promise.reject(error);
});
http.interceptors.response.use(response => {
// 对响应数据做处理，例如只返回data部分
return response.data;
}, error => {
return Promise.reject(error);
});
使用封装后的请求
http({
method: 'get',
url: '/data'
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error(error);
});
个性化配置
设置请求根路径
axios.defaults.baseURL = 'https://api.example.com';
设置请求超时时间
axios.defaults.timeout = 1000;
设置请求头
axios.defaults.headers.common['Authorization'] = 'Bearer your-token';
取消请求
const source = axios.CancelToken.source();
axios.get('/data', {
cancelToken: source.token
}).catch(function(thrown) {
if (axios.isCancel(thrown)) {
console.log('Request canceled', thrown.message);
} else {
// 处理错误
}
});
// 取消请求（如果还未发送请求，则请求将被取消）
source.cancel('Operation canceled by the user.');
以上是关于axios的基本介绍、封装和个性化配置的详细说明，能够帮助开发者更好地使用axios这一强大的HTTP客户端。