时间：2021/01/14
一.axios库
axios是Vue官方推荐的异步通信http库，与jQuery中ajax有相同的作用，可以用来请求后端接口中的数据。
示例代码如下：
data.json:
1 { 2 "name": "machi", 3 "school": "bupt", 4 "url": "https://www.cnblogs.com/machi12/" 5 }
axios.html:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 </head> 9 <body> 10 11 <div id="app"> 12 <p>{{info.name}}</p> 13 <p>{{info.school}}</p> 14 <a v-bind:href="info.url">点击我</a> 15 </div> 16 17 <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> 18 <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 19 20 <script> 21 var vm = new Vue({ 22 el: '#app', 23 // 下面是data方法，用来从axios返回的响应中接收数据 24 data(){ 25 return{ 26 info: { 27 name: null, 28 school: null, 29 url: null 30 } 31 } 32 }, 33 // Vue提供的钩子函数 34 mounted(){ 35 axios.get("data.json").then(response => (this.info = response.data)); 36 } 37 }); 38 39 40 </script> 41 42 </body> 43 </html>
在上面的代码中，response.data就是data.json中的数据，通过Vue中data方法的返回值info来接收response.data中的数据，需要注意的是，info中格式要与data.json中的一致（可以只写需要的部分）。
二.跨域请求问题
在进行调试的时候，由于是通过file协议来进行访问的，所以出现了跨域请求错误，错误如下所示：
Access to XMLHttpRequest at 'file:///Users/machi/Code/VueProject/Test-03-axios/data.json' from origin 'null' has been
blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome,
chrome-extension, chrome-untrusted, https.
解决的方法是在本地开启一个服务器，通过服务器来进行访问，如果使用vs code，推荐使用live server这款插件来进行调试，它可以在本地开启一个服务，可以很好的解决跨域请求问题。