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 
 2 
 3 
 4     
 5     
 6     
 7     
 8 
 9 
10 
11     

12         
{{info.name}}
13         
{{info.school}}
14         点击我
15     
16     
17     
18     
19 
20     
41 
42 
43 

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