《axios常用写法汇总》

在现代前端开发中，与后端进行数据交互是不可或缺的一环。Axios作为一个基于Promise的HTTP客户端，为解决前后端数据交互提供了简洁、强大的解决方案。它能够简化异步请求的处理流程，使代码更加清晰易读，并且支持浏览器和Node.js环境。

一、基本GET请求

最直接的方式就是使用axios.get()方法。例如要获取一个名为users的数据接口：

javascript
axios.get('https://jsonplaceholder.typicode.com/users')
.then(function (response) {
// 处理成功返回的数据
console.log(response.data);
})
.catch(function (error) {
// 处理请求错误
console.log(error);
});


我们也可以通过配置参数来发送get请求。如果需要向服务器传递查询参数：

javascript
axios.get('/search', {
params: {
query: 'vue'
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});


二、POST请求提交数据

当我们有数据要提交给服务器时，通常会用到axios.post()。比如注册用户信息：

javascript
axios.post('https://jsonplaceholder.typicode.com/posts', {
title: 'foo',
body: 'bar',
userId: 1
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});


还可以设置请求头，以满足不同场景下的需求。例如指定Content - Type为application/json：

javascript
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
},
headers: {'Content-Type': 'application/json'}
});


三、的使用

为了对请求或者响应做一些预处理，可以利用功能。这在项目中做统一的错误处理、身份验证等非常有用。

添加请求：

javascript
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});


添加响应：

javascript
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});


以上就是一些axios的常用写法，不同的业务场景下可以根据自身需求灵活运用这些方法，从而更好地实现前后端的数据交互。