Vue使用Axios

安装

1
npm install axios -save

使用axios发送get请求

1
2
3
4
5
6
7
8
9
10
11
12
import axios from 'axios';  

// 发送 GET 请求  参数可以用params传递
axios.get('https://api.example.com/data'， params:{id:1})  
  .then(function (response) {  
    // 处理成功响应  
    console.log('成功响应:', response.data);  
  })  
  .catch(function (error) {  
    // 处理错误情况  
    console.error('发生错误:', error);  
  });

使用axios发送post请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import axios from 'axios';  

// 发送 POST 请求  
axios.post('https://api.example.com/data', {  
  firstName: 'John',  
  lastName: 'Doe'  
},{
	headers: {  
    	'Content-Type': 'application/json'  
	} 
})  
.then(function (response) {  
  // 处理成功响应  
  console.log('成功响应:', response.data);  
})  
.catch(function (error) {  
  // 处理错误情况  
  console.error('发生错误:', error);  
});

创建axios实例

1
2
3
4
5
6
7
8
import axios from 'axios'

const request = axios.create({
    baseUrl: 'https://xxx.xxx.com',
    timeout: 6 * 1000
})

export default request;

二次封装axios

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
import axios from 'axios'

const request = axios.create({
    baseUrl: 'https://xxx.xxx.com',
    timeout: 6 * 1000
})

/* 
请求拦截器:
拦截特定条件下的请求并重定向到其他页面或接口 - 未登录状态
公共的请求头信息
请求前做一些逻辑处理 - 数据的预处理、格式转换等
在每个请求发送前显示 loading 状态
*/
// 添加请求拦截器  
request.interceptors.request.use(  
  function(config) {  
    // 在发送请求之前逻辑操作  
    return config;  
  },  
  function(error) {  
    // 对请求错误逻辑操作 
    return Promise.reject(error);  
  }  
);  

/*
响应拦截器:
对响应数据进行统一处理
统一处理错误状态码
在每个请求完成后隐藏 loading 状态
对响应进行日志记录或统计
*/
// 添加响应拦截器  
instance.interceptors.response.use(  
  function(response) {  
    // 对响应数据逻辑操作  
    return response.data;  
  },  
  function(error) {  
    // 对响应错误逻辑操作
    if (error.response.status === 404) {  
      // 处理404错误  
      console.log('Not Found');  
    } else if (error.response.status === 500) {  
      // 处理500错误  
      console.log('Internal Server Error');  
    } else {  
      // 其他错误处理  
      console.log('An error occurred');  
    }  
    return Promise.reject(error);  
  }  
);  


export default request;