vue 如何发起网络请求 之 axios
|
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时拒绝 }}}） |
