Loading

Vue笔记（二）：axios异步通信

 

时间：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这款插件来进行调试，它可以在本地开启一个服务，可以很好的解决跨域请求问题。

 

posted @ 2022-01-14 21:09  驰  阅读(82)  评论(0)    收藏  举报