2023最新版老杜Vue2+3实战教程（四）Vue与AJAX

动力节点老杜全新版Vue教程笔记分享给大家

学习の地止：https://www.bilibili.com/video/BV17h41137i4

• 视频教程从Vue2开始讲解，一步一个案例，知识点由浅入深，然后很自然的过度到Vue3版本。Vue3是目前企业中使用最多的一个版本。
• 视频中会把每一个Vue的知识点讲解的非常通透，不但举例告诉你怎么用，还会告诉你底层实现原理。
• 例如：Vue的数据代理机制底层实现原理是什么？本套视频中会从零手写一个Vue的数据代理机制，都是源码级的讲解。

4 Vue与AJAX

4.1 回顾发送AJAX异步请求的方式

发送AJAX异步请求的常见方式包括：

1. 原生方式，使用浏览器内置的JS对象XMLHttpRequest
   1. const xhr = new XMLHttpRequest()
   2. xhr.onreadystatechange = function(){}
   3. xhr.open()
   4. xhr.send()
2. 原生方式，使用浏览器内置的JS函数fetch
   1. fetch(‘url’, {method : ‘GET’}).then().then()
3. 第三方库方式，JS库jQuery（对XMLHttpRequest进行的封装）
   1. $.get()
   2. $.post()
4. 第三方库方式，基于Promise的HTTP库：axios （对XMLHttpRequest进行的封装）
   1. axios.get().then()

axios是Vue官方推荐使用的。

4.2 回顾AJAX跨域

1. 什么是跨域访问？
   1. 在a页面中想获取b页面中的资源，如果a页面和b页面所处的协议、域名、端口不同（只要有一个不同），所进行的访问行动都是跨域的。
   2. 哪些跨域行为是允许的？
      1. 直接在浏览器地址栏上输入地址进行访问
      2. 超链接
      3. 

同源策略是浏览器需要遵循的标准，而如果是服务器向服务器请求就无需遵循同源策略的。

4.3 演示跨域问题

Vue脚手架内置服务器的地址：http://localhost:8080
我们可以额外再开启一个其它的服务器，这个服务器随意，例如：node server、Apache服务器、JBOSS服务器、WebLogic服务器、WebSphere服务器、jetty服务器、tomcat服务器…我这里选择的是基于Java语言的一个服务器Tomcat，这个web服务器开启了一个8000端口，提供了以下的一个服务，可以帮助我们获取到一个Bug列表：
http://localhost:8000/bugs/

打开BugList案例的代码，在mounted钩子函数中发送ajax请求，获取bug列表。
vue-cli安装axios库：npm i axios。使用时：import导入axios