1
|
|
1
2
3
4
5
6
7
8
9
10
|
// axios 请求 在main.js里边写入 import Axios from 'axios' // 配置请求信息 var $http = Axios.create({ baseURL: '配置路径' , timeout: '3000' , //超时时间 headers: { 'X-Custom-Header' : 'foobar' } //请求头 }) Vue.prototype.$http = $http |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
// 方法调用,回调,post , 基于es6 promise methods: { getNum: function () { var data = { TenantID: "0" } this .$http.post( "请求路径-方法1" , data ) .then(res => { console.log(res) //返回方法1的值 var data1 = { TenantID: res.data.Code } //方法1 的返回值作为参数传递 res.data.Code this .$http.post( "请求路径-方法2" , data1 ) .then(res1 => { console.log(res.data) //同样可以使用方法1的返回值 console.log(res1) //返回方法2的值 }) }) . catch ( function (error) { console.log(error) }) } //需要使用箭头函数,否则 this.$http 中的this 指向window,会报 $http undefined //另外也可以在当前组件 import axios from 'axios' 引入axios 包 //将 this.$http 替换 为 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
|
axios 拦截器 你可以截取请求或响应在被 then 或者 catch 处理之前 //添加请求拦截器 axios.interceptors.request.use( function (config){ //在发送请求之前做某事 return config; }, function (error){ //请求错误时做些事 return Promise.reject(error); }); //添加响应拦截器 axios.interceptors.response.use( function (response){ //对响应数据做些事 return response; }, function (error){ //请求错误时做些事 return Promise.reject(error); });<br> 以后可能需要删除拦截器。 var myInterceptor = axios.interceptors.request.use( function () { /*...*/ }); axios.interceptors.request.eject(myInterceptor);<br> 你可以将拦截器添加到axios的自定义实例。 var instance = axios.create(); instance.interceptors.request.use( function () { /*...*/ });<br> 处理错误 axios.get( '/ user / 12345' ) . catch ( function (error){ if (error.response){ //请求已发出,但服务器使用状态代码进行响应 //落在2xx的范围之外 console.log(error.response.data); console.log(error.response.status); console.log(error.response.headers); } else { //在设置触发错误的请求时发生了错误 console.log( 'Error' ,error.message); }} console.log(error.config); }); 您可以使用validateStatus配置选项定义自定义HTTP状态码错误范围。 axios.get( '/ user / 12345' ,{ validateStatus: function (status){ return status < 500; //仅当状态代码大于或等于500时拒绝 }} }) |