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('https://api.example.com/data', {key1: 'value1',key2: 'value2'
}).then(response => {console.log('Data posted:', response.data);}).catch(error => {console.error('Error posting data:', error);});

使用Axios处理不同的http请求

带参数的Get请求

axios.get('/user', {params: {ID: 12345}
})
.then(response => console.log(response.data))
.catch(error => console.error(error));

post请求：用于发送数据

axios.post('/user', {firstName: 'John',lastName: 'Doe'
})
.then(response => console.log(response.data))
.catch(error => console.error(error));

PUT请求：用于更新数据

axios.put('/user/123', {firstName: 'John',lastName: 'Doe'
})
.then(response => console.log(response.data))
.catch(error => console.error(error));

DELETE请求:用于删除数据

axios.delete('/user/123')
.then(response => console.log(response.data))
.catch(error => console.error(error));

设置全局默认配置

可以通过设置默认配置，简化后续请求，比如设置请求的基础URL和超时时间

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.timeout = 10000;  // 超时时间为10秒

使用拦截器

拦截器允许在请求或响应被处理之前拦截它们，这对于处理身份验证，错误处理非常有用

axios.interceptors.request.use(config => {// 在发送请求之前做些什么，比如添加 tokenconfig.headers.Authorization = `Bearer ${yourToken}`;return config;
}, error => {// 对请求错误做些什么return Promise.reject(error);
});

响应拦截器:

axios.interceptors.response.use(response => {// 对响应数据做点什么return response;
}, error => {// 对响应错误做点什么if (error.response.status === 401) {// 处理未授权错误}return Promise.reject(error);
});

取消请求

通过‘cancelToken’可以取消请求，这在处理用户主动取消操作或者请求超时时使用

const CancelToken = axios.CancelToken;
let cancel;axios.get('/user/12345', {cancelToken: new CancelToken(function executor(c) {// executor 函数接收一个 cancel 函数作为参数cancel = c;})
})
.catch(function (thrown) {if (axios.isCancel(thrown)) {console.log('Request canceled', thrown.message);} else {// 处理错误}
});// 取消请求
cancel('Operation canceled by the user.');

处理文件上传和下载

文件上传

const formData = new FormData();
formData.append('file', fileInput.files[0]);axios.post('/upload', formData, {headers: {'Content-Type': 'multipart/form-data'},onUploadProgress: progressEvent => {console.log('Upload Progress: ' + Math.round((progressEvent.loaded / progressEvent.total) * 100) + '%');}
})
.then(response => console.log(response.data))
.catch(error => console.error(error));

文件下载:

axios({url: '/file/download',method: 'GET',responseType: 'blob',  // important
})
.then(response => {const url = window.URL.createObjectURL(new Blob([response.data]));const link = document.createElement('a');link.href = url;link.setAttribute('download', 'file.pdf');  // 设置下载文件名document.body.appendChild(link);link.click();
})
.catch(error => console.error(error));

##响应结构

{// `data` 是服务器提供的响应数据data: {},// `status` 是响应的 HTTP 状态码status: 200,// `statusText` 是 HTTP 状态消息statusText: 'OK',// `headers` 是响应头headers: {},// `config` 是请求时的配置信息config: {},// `request` 是生成此响应的请求request: {}
}

实例:

const instance = axios.create({baseURL: 'https://api.example.com',timeout: 1000,headers: {'X-Custom-Header': 'foobar'}
});instance.get('/endpoint').then(response => console.log(response.data)).catch(error => console.error(error));