1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| script
axios.get('https://api.example.com/data') .then(response => { // 处理成功情况 console.log(response.data); }) .catch(error => { // 处理错误情况 console.error(error); });
```在上述代码中，`axios.get()`方法用于发送GET请求。`.then()`方法用于处理请求成功的情况，而`.catch()`方法用于处理请求失败的情况。### GET请求参数GET请求通常需要传递参数。Axios允许通过多种方式传递参数：1. **参数拼接**：直接在URL后面拼接参数。
```java
script
axios.get('https://api.example.com/data?id=123')
```2. **params对象**：在`axios.get()`方法中传递一个`params`对象。
```java
script
axios.get('https://api.example.com/data', { params: { id: 123 }})
```3. **URL模板**：使用ES6的模板字符串功能。
```java
script
const id = 123;axios.get(`https://api.example.com/data?id=${id}`)
```## 发送POST请求与GET请求相比，POST请求通常用于向服务器发送数据。在Vue中使用Axios发送POST请求也很简单：
```java
script
axios.post('https://api.example.com/data', { name: 'John Doe', age: 30}) .then(response => { // 处理成功情况 console.log(response.data); }) .catch(error => { // 处理错误情况 console.error(error); });
```在上述代码中，`axios.post()`方法用于发送POST请求。第一个参数是请求的URL，第二个参数是要发送的数据。### POST请求参数POST请求通常发送JSON格式的数据。在Axios中，可以直接传递一个对象作为POST请求的数据。Axios会自动将对象转换为JSON格式。### 请求头设置在某些情况下，可能需要自定义HTTP请求头。例如，发送POST请求时，可能需要设置`Content-Type`为`application/x-www-form-urlencoded`。在Axios中，可以通过`headers`属性来设置请求头：
```java
script
axios.post('https://api.example.com/data', { name: 'John Doe', age: 30}, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' }})
```## 错误处理在发送HTTP请求时，可能会遇到各种错误，如网络错误、服务器错误等。在Axios中，可以通过`.catch()`方法捕获这些错误，并进行相应的处理。
```java
script
axios.get('https://api.example.com/data') .catch(error => { if (error.response) { // 服务器返回了错误响应 console.log(error.response.data); console.log(error.response.status); console.log(error.response.headers); } else if (error.request) { // 请求已发出，但未收到响应 console.log(error.request); } else { // 发生了其他错误 console.log('Error', error.message); } });
```## 拦截器Axios提供了拦截器功能，可以在请求或响应被处理前进行自定义操作。这对于添加全局的加载指示器、错误处理、认证等非常有用。
```java
script
// 添加请求拦截器axios.interceptors.request.use(config => { // 在发送请求之前做些什么 return config;}, error => { // 对请求错误做些什么 return Promise.reject(error);});// 添加响应拦截器
|