基于vue-cli的vue项目之axios的使用4--并发请求

1. 1.配置config/index.js:解决跨域问题  
2. dev: {  
3.         env: require('./dev.env'),  
4.         port: 8008,  
5.         autoOpenBrowser: false,  
6.         assetsSubDirectory: 'static',  
7.         assetsPublicPath: '/',  
8.         proxyTable: {  
9.             '/ajaxurl': {  
10.                 target: 'https://www.aaaaaaa.com/',  
11.                 changeOrigin: true,  
12.                 pathRewrite: {  
13.                     '^/ajaxurl': '/'  
14.                 }  
15.             }  
16.   
17.         }  
18.       
19.     }  
20.   
21. 2.main.js：配置axios到原型链中,注意第二十五行  
22. import Vue from 'vue'  
23. import App from './App'  
24. import axios from 'axios'  
25. Vue.prototype.$http=axios;  
26. new Vue({  
27.     el: '#app',  
28.     render: h => h(App)  
29. })  
30.   
31. 3.app.vue：使用请求，get为例，第四十七行到第五十二行设置并发，ajax1与ajax2为两个请求，  
32. 其中ajax2的正确地址应该为/ajaxurl/welfare/gpa/index/index，第六十行为错误的链接  
33. <template>  
34.     <div id="app">  
35.         huoqu  
36.         <button @click="myajax">获取首页信息</button>  
37.     </div>  
38. </template>  
39. <script>  
40.     export default {  
41.         name: 'app',  
42.         components: {},  
43.         data: function() {},  
44.         methods: {  
45.             //get为例子  
46.             myajax: function() {  
47.                 this.$http.all([this.ajax1(),this.ajax2()])  
48.                 .then(this.$http.spread(function(a,b){//全部请求正确时候触发  
49.                     console.log(a);  
50.                     console.log(b);  
51.                     console.log("请求全部加载完毕");  
52.                 }))  
53.         },  
54.         //第一个接口请求  
55.         ajax1(){  
56.             return this.$http.get("/ajaxurl/welfare/gpa/brand/list?page=1&size=10");  
57.         },  
58.         //第二个接口请求  
59.         ajax2(){  
60.             return this.$http.get("/ajaxurl/welfare/gpa/index/inde");  
61.         },  
62.               
63.         }  
64.     }  
65. </script>  
66. <style>  
67.   
68. </style>