axios是一个优秀的基于Promise的HTTP库，也是vue的作者推荐使用vue而不是vue-resource。它比ajax有更多的功能。对于axios的学习，大致可以分为三个部分曲，第一是可以灵活运用基础知识，第二是可以根据自己的项目需要打包axios库，第三是阅读源码，看得懂，说得有道理。今天，我们就来说说axios的基本应用。结合前作的基础知识，整理出一个前后台双杀的基于Promise的HTTP库。前端用于浏览器发送XMLHttpRequest请求，后端可用于Node.JShttp请求。最新的浏览器支持它。这里不提IE6和7，8，算了，前端已经放弃IE了，支持拦截请求和响应，可以取消请求。客户端支持CSRF自动转换JSON数据，请求数据和响应数据转换，多请求操作的坑，还有楼上的一些知识的梳理可以看出，它有很多ajax没有的功能，还有“强”字。跨域问题跨域问题是由浏览器的同源策略引起的。那么什么是同源策略呢？同源策略是一种浏览器安全机制，可防止来自一个域的Javascript脚本与来自另一个域的Javascript脚本进行交互。再深入一点，什么是同源性？也就是说，两个页面具有相同的协议、主机和端口号。也就是说，如果你使用http协议请求https协议，浏览器是不会批准的；如果你请求8080和8090协议相同，主机相同，协议相同，端口相同，但你是一个域名，浏览器是不会同意的。一种是域名A记录的ip地址，也是浏览器不认可的。解决跨域问题的关键是明确前端能做什么？后台能做什么？比如后端可以使用反向代理代理到不跨域的地方，或者设置请求头来解决。前端script脚本自然是非跨域的，可以引用，所以这也是JSOUP可行的原因。axios全局配置axios的配置分为全局和局部。这里先说全局的，因为后面实战部分不会涉及到这个。全局的适合单页变化不大的那种。很多项目还是需要针对具体的问题进行详细的分析，这里就不赘述了，楼下的配置比较通用。后面实战部分不会涉及到axios的例子，所以这里单独说一下。让我举一个例子。通常我们可以使用http协议或者https协议来访问网站。https协议比http协议需要多设置一些参数，因为它有证书，会遇到unabletoverifythefirstcertificate这样的错误，所以实例的作用很明显，根据具体配置实例需要和请求相应的接口进行交互。axios的拦截器也要提一下，后面实战就不涉及了。您可以在此之前拦截请求和响应并捕获。实战部分不涉及错误处理，也就是说，我们在操作axios的时候，可能会遇到一些错误，比如我发送了但是没有响应，后台响应了但是没有以2xx开头，还有有一些错误是因为网络等原因导致错误，所以需要进行错误处理。您可以使用validateStatus来定义由http状态代码返回的范围，我不想要更多。取消请求笔者在当前项目中没有遇到过这样的应用场景，先了解一下。有一个名为CancelToken.source的API可以完成此操作。后台服务器同意作者在自己的腾讯云学生机上基于Express封装了一些接口用于楼下的实验。更大的感受就是项目中尽量少用arr.forEach()数组的API，效率太差了。请求域名：bh.zhijiangtao.xin请求IP地址：49.234.189.222请求协议：httpCDN地址这里后面会演示，笔者只是为了方便，所以使用CDN导入包库，这里多放几个回是的，读者可以选择其中之一。实战演示讲的就是实战实战部分，大致如下内容请求接口返回部分网站近期热点数据；人员信息增删改查，跨域演示。这里先对接口没概念，以后再完善。我们不要求界面花里胡哨，重点是数据交互，就这样吧。搭建demo环境打开VSCode，去插件里下载Liveserver，然后我们就用它来启动一个服务，对于新手来说是多么的简单。新建一个index.html文件如图：然后我们新建一个js文件夹，再新建一个index.js文件。案例一：获取网站热点话题请求地址：http://bh.zhijiangtao.xin:3000/axios请求方式：GET请求参数：name(String)响应参数：如图所示，我们知道我们需要使用axios.get()方法或者简称axios({})，为了灵活使用，我们封装了一个function方法，然后使用axios.all()来处理多个请求。写到这里，我们就可以测试了。如果你已经按照我上面说的在vscode中安装了直播服务器，请点击vscode右下角的GoLive。如果你没改过，它会打开浏览器，跳转到本机的5500端口，打开页面，我们打开控制台看输出，发现是这样的。楼上的图片巧妙地印证了我一开始的结论。axios会进行数据转换和JSON化，这就带来了一个问题。比如我这里要获取data里面的内容，那肯定是wb。data.data是我们所期望的。感觉有点尴尬和多余。特此曝光，希望大家注意。开发的时候最好先说说前后端，用什么技术，数据怎么定义，而且不是一下子把事情做完。这里有兴趣的同学可以自己创建，或者结合小程序自己创建一个页面，反正API就在这里。案例二：跨域demo请求地址：http://bh.zhijiangtao.xin:3000/axios/jbrnk请求方式：GET请求参数：无响应参数：如图，我在后台做了一个进程，所以browser打开没问题，但是用axios会出现跨域错误，我们来演示一下。代码如下：具体效果如下：可以看到直接挂了，执行不了“我跨域了。。。”这句话，这个故事告诉我们，根跨域问题与浏览器策略同源，但解决方案应该交给后端，当然前端也在努力。案例三：基于用户信息的增删改查请求地址：http://bh.zhijiangtao.xin:3000/axios/user请求方式：GET,POST,PUT,DELETE请求参数：以上请求方式对应分别对增删改查一个部分，我们使用id来删除和修改参数。如果添加它，您只需要姓名、年龄和状态。如果你不要求它，它就没有意义。查询所有用户信息（GET）的具体代码如下：由于页面较长，不再打开浏览器进行演示。请读者打开控制台进行观察。后半部分是重头戏。你会发现axios是用来执行POST、PUT、DELETE等操作的。当提出此类非简单请求时，将执行OPTIONS预检查请求。添加用户信息（POST），添加成功后可以看到效果，紧接着更痛苦的事情发生了。更新用户信息(PUT)&&删除用户信息(DELETE)：先说流程。我设置了后台允许跨域，所有的接口都跑了postman，但是放在前端实现逻辑上。不知道为什么浏览器还是跨域，查了一些资料也无果。抱歉作者目前水平有限，暂时还是解决不了这个问题。如有读者有任何建议，请联系作者进行讨论。下面简单分析一下上面的问题。我们可以确定后端接口应该没有问题。那么问题出在前端跨域。放到代码里就是axios发送put和delete请求的代码写法。走吧，我们暂时只能推理到这一步，初步推测可能是缺少了一些请求头的设置。于是，我们想到了这样一个开发问题，就是当后端接口用Postman编写测试的时候，把接口给前端是可行的，然后前端跨域不管它是使用AJAX还是Axios。这时候前端跑去问后端，你这个接口有问题！那么问题来了，前端如何理性的修正这个思路呢？让我先来一个！伙计，放弃邮递员，改用女邮递员。Postman不是浏览器，不存在跨域问题，自然找不到问题。这是需要注意的一点。下面是我的前端逻辑部分的代码。既然如此，兄弟，那我就不穿越了。一开始我们并没有说axios是一个基于Promise的HTTP库。放在前台就是浏览器的xhr请求，放在后台就是Node.jsrequest请求，好吧，那我们就去后台验证一下结果。附上我的代码：我们更新id为2的记录，然后删除id为1的记录，可以看到可以更新删除。以上就是本次实验的全部内容，大致是在看完了axios基础知识之后的一些设计的一些例子，希望能帮助读者更好的掌握这块知识。
