一、什么是axios
axios是一个基于Promise的HTTP客户端，用于浏览器和Node.js中发送HTTP请求。它支持各种HTTP请求方法，如GET、POST、PUT、DELETE等，并且可以拦截请求和响应，设置请求超时等功能。它也可以与现代前端框架（如Vue.js、React、Angular等）进行集成。
二、如何在Vue.js中使用axios
（1）安装axios
在Vue项目中使用axios之前，需要先安装axios。可以使用npm或yarn命令（必须要有node.js环境）来安装axios：
npm install axios
// 或
yarn add axios
（2）发送HTTP请求
在Vue.js中使用axios非常方便。可以使用axios.get()、axios.post()、axios.put()、axios.delete()等方法来发送不同类型的HTTP请求。下面是一个简单的例子，使用axios从服务器获取数据并将其显示在页面上：
<template>
<div>
<ul>
<li v-for="post in posts" :key="post.id">{{ post.title }}</li>
</ul>
</div>
</template>
<script>
import axios from 'axios'; // 引入axios
export default {
data() {
return {
posts: [],
};
},
mounted() {
axios.get('https://jsonplaceholder.typicode.com/posts')
.then(response => {
this.posts = response.data;
})
.catch(error => {
console.error(error);
});
},
};
</script>
在上述代码中，我们使用了axios.get()方法来获取指定URL的数据。然后，我们处理响应并将数据存储在组件的数据对象中。如果出现错误，我们会在控制台中输出错误消息。
（3）请求参数
除了简单的GET请求外，还可以在请求中添加更多参数，例如请求头、请求体、查询参数等等。例如，以下是使用axios.post()方法向服务器提交JSON数据的示例：
<script>
import axios from 'axios';
export default {
data() {
return {
newUser: {
name: '',
email: '',
password: '',
},
};
},
methods: {
addUser() {
axios.post('https://api.example.com/users', this.newUser, {
headers: {
'Content-Type': 'application/json',
},
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
},
},
};
</script>
在上面的示例中，我们使用axios.post()方法向https://api.example.com/users的URL发送一个名为newUser的JSON对象。我们还添加了一个headers选项，用于设置请求头。
（4）拦截器
还可以使用axios拦截器来修改请求或响应的内容，或者在请求失败时自定义错误消息。例如，以下是一个拦截器的示例，用于在每个请求中添加Authorization头：
<script>
import axios from 'axios';
axios.interceptors.request.use(config => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
});
export default {
// ...
};
</script>
在上面的示例中，我们使用axios.interceptors.request.use()方法来添加一个请求拦截器。在拦截器中，我们检查是否存在token，并将其作为Authorization头添加到请求中。也可以使用axios.interceptors.response.use()方法添加响应拦截器。
（5）对axios进行二次封装
在Vue项目中，我们经常需要对axios进行封装以便于统一处理请求和响应。以下是一个示例代码，通过封装axios实现了统一的请求拦截器、响应拦截器及错误处理。
写在一个JavaScript文件中
import axios from 'axios';
// 创建axios实例
const instance = axios.create({
baseURL: 'https://api.example.com/',
timeout: 10000,
});
// 请求拦截器
instance.interceptors.request.use(config => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
}, error => {
return Promise.reject(error);
});
// 响应拦截器
instance.interceptors.response.use(response => {
return response.data;
}, error => {
if (error.response) {
// 根据HTTP状态码判断错误类型
switch (error.response.status) {
case 401:
// 处理未授权错误
break;
case 403:
// 处理禁止访问错误
break;
case 404:
// 处理资源不存在错误
break;
default:
// 处理其他错误
break;
}
} else if (error.request) {
// 处理请求超时等错误
} else {
// 处理其他错误
}
return Promise.reject(error);
});
// 封装get方法
export function get(url, params = {}) {
return instance.get(url, { params });
}
// 封装post方法
export function post(url, data = {}) {
return instance.post(url, data);
}
在上述代码中，我们首先创建了一个名为instance的axios实例，并设置了默认的baseURL和timeout。然后，我们使用instance.interceptors.request.use()方法添加了一个请求拦截器，在其中将存储在localStorage中的token作为Authorization头添加到每个请求中。接着，我们使用instance.interceptors.response.use()方法添加了一个响应拦截器，并根据HTTP状态码判断错误类型。最后，我们使用export关键字导出了get和post两个方法，分别用于发起GET和POST请求。
在Vue组件中使用这些方法非常简单。例如，以下是一个示例组件，使用上述封装的get方法从服务器获取数据并将其显示在页面上：
<template>
<div>
<ul>
<li v-for="post in posts" :key="post.id">{{ post.title }}</li>
</ul>
</div>
</template>
<script>
import { get } from '@/utils/request';// 导入封装的get方法
export default {
data() {
return {
posts: [],
};
},
mounted() {
get('/posts')
.then(data => {
this.posts = data;
})
.catch(error => {
console.error(error);
});
},
};
</script>
在上述代码中，我们首先使用import关键字导入封装的get方法，然后在mounted钩子函数中调用该方法并指定要请求的URL。如果请求成功，我们将响应数据存储在组件的数据对象中，并在页面上显示它们。如果请求失败，我们将错误消息输出到控制台。
总之，在Vue.js中使用axios非常方便，它可以帮助我们轻松地与服务器进行通信，并处理异步请求的结果。
