首页手记 axios基础应用实战

axios基础应用实战

标签：

Html/CSS Html5 JavaScript

axios是一个基于Promise优秀的HTTP库，也是vue作者推荐配合vue使用的代替vue-resource的库,它比ajax功能要丰富点

对于axios的学习，大致可以分为三部曲，第一就是基础知识你能够灵活运用，第二就是能够根据自己项目需要封装一下axios库，第三个就是看源码吧，能看得懂，讲的出其道理。今天，我们就讲讲axios的基础应用。

前期工作

基础知识梳理

一个基于Promise的HTTP库
前后端double kill, 前端用于浏览器发送XMLHttpRequest请求，后端可以于Node.JS的http请求
最新的浏览器它都支持，这里不要再提IE6、7、8了，忘了它们吧，前端已经放弃IE了
支持拦截请求和响应
可以取消请求哦
客户端支持CSRF
自动转换JSON数据
转换请求数据和响应数据
能进行多请求操作
坑，也是有的

从楼上的知识梳理可以看到，它具备了很多ajax不具备的功能，一个字 “强”。

跨域问题

跨域是浏览器的同源策略造成的。那么什么是同源策略呢？同源策略是浏览器的一种安全机制，它会阻止一个域的Javascript脚本和另一个域Javascript脚本进行交互。再深究下去，那么什么又是同源呢？就是两个页面具有相同的协议、主机和端口号。

就是说你一个http协议的去请求https协议的，浏览器是部批准的；你同协议同主机下一个8080请求8090的也是不被浏览器批准的，同协议同端口，但是你一个是域名，一个是域名A记录的ip地址，这浏览器也是不批准的。

解决跨域问题的关键，还是要理清前端可以做什么？后端可以做什么？例如后端可以用反向代理给它代理到不跨域的地方，也可以设置请求头进行解决，前端的script脚本天然无跨域，你可以引用，所以这也JSOUP可行的原因。

axios全局配置

axios的配置可以分为全局和局部的，这里把全局的拎出来讲，因为这个在后面实战部分不会涉及到，全局的话适合那种单页面改动不大的，很多项目还是要具体问题具体分析，所以这里就带一下，大致有楼下配置较为常见。

axios的实例

这个在后面实战部分也不会涉及，所以这里单独拎出来讲。我举个例子吧，就是像正常我们访问网站可以是http协议也可以是https协议，其中https协议要比http协议多设置一些参数，因为它是有证书的，会遇到unable to verify the first certificate这样的错误，所以实例的作用就很明显了，按照具体的需求配置实例请求相应的接口作交互。

)

axios的拦截器

这个也要拎出来讲，在后面实战不涉及。你可以在then和catch之前拦截请求和响应。

错误处理

这块在实战部分也不涉及，就是说在我们进行axios操作的时候，可能会遇到一些错误，例如我发出去了但是没响应，后台响应了但是不是2xx开头的，还有一些因为网络等原因的错误啦，所以进行错误处理很有必要。

你可以用validateStatus定义一个http状态码返回的范围,超过的老哥我不要了。

取消请求

这个笔者到现在的项目也没有遇到过这种应用场景，所以暂作了解吧，有个API是CancelToken.source可以完成这个操作。

后端服务器约定

笔者在自己的腾讯云学生机上基于Express封装了一些接口用于楼下的实验。比较大的感触就是arr.forEach()这个数组的API在项目尽量少用吧，效率太差了。

请求的域名： bh.zhijiangtao.xin

请求的IP地址：49.234.189.222

请求的协议：http

CDN地址

这里后面要演示，笔者就是图个方便，所以用CDN来进行包库引入，这里整理下几个可还行的，读者任选其一即可。

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>

实战演示

关于实战部分，大致是如下内容，请求某接口返回近日某些网站热门话题数据；对于人员信息进行增删改查以及对跨域的演示。这里我们就先对界面没有想法了，后续再完善吧，不要求界面做的花里胡哨了，侧重点在数据的交互上面, 就意思下。

演示环境搭建

打开VSCode，去插件下载Live server,到时候我们就用它来起一个服务，初学者怎么简单怎么来吧。

新建一个index.html文件如图：

然后我们新建一个js文件夹，然后再新建index.js文件。

案例一：获取网站热门话题

请求地址： http://bh.zhijiangtao.xin:3000/axios

请求方法： GET

请求参数：name(String)

响应参数：如图所示

我们知道是要用axios.get()方法的知识或者简写axios({})，为了灵活运用，我们封装一个函数方法，然后通过axios.all()去进行多请求处理。

写到这里我们就可以进行测试了，如果你按照我楼上说的已经在vscode安装了live server,那么请点击一下vscode右下角的Go Live，如果你没有改动的话，它会打开浏览器跳转到本机5500端口并打开页面，我们打开控制台看输出,发现是这样的。

楼上这幅图，巧妙地印证了我最开始总结的，axios会进行数据转换和JSON化，这就带来一个问题，比如说我这里想取到数据data里面的内容的话，就要是wb.data.data这样才是我们期望的，感觉有点别扭，有点冗余的感觉，这里我特此暴露出来希望大家注意，开发的时候前后端最好先讲好吧，采用什么技术，数据怎么定义，而不是一拍脑袋在做事。这里有兴趣的同学可以自己创建下，也可以结合小程序啊啥的自己搞个页面，反正API在这里了。

案例二：跨域的演示

请求地址：http://bh.zhijiangtao.xin:3000/axios/jbrnk

请求方法：GET

请求参数：无

响应参数：如图

这里我在后台做了个处理，所以浏览器打开是没问题的，但是用axios会有个跨域问题的错误，演示下吧。

代码如下：

具体的效果如下：

可以看到它直接挂了，不可能往下执行打出那句"我跨域了。。。"，这个故事告诉我们，跨域问题的根本是浏览器的同源策略，但是解决方案应该交由后端去做，当然前端也有在做的部分。

案例三：基于用户信息的增删改查

请求地址：http://bh.zhijiangtao.xin:3000/axios/user

请求方法：GET、POST、PUT、DELETE

请求参数：楼上的请求方法分别对应增删改查一部分，参数这边我们统一用id进行删和改，增加的话只要姓名name,年龄age,状态status就好，查询的话不做要求就是意思下。

查询所有用户信息(GET)

具体的代码如下：

篇幅问题，不再打开浏览器演示了，请读者自行打开控制台观摩。

后面的是重头戏，你会发现用axios进行POST、PUT、DELETE等操作，这类非简单请求时，会进行OPTIONS预检请求。

添加用户信息(POST)

可以看到添加成功后的效果

后面就是比较蛋疼的事情发生了。

更新用户信息(PUT)&&删除用户信息(DELETE)：卒

我先说下过程吧，后台我是设置了允许跨域的，所有接口都用postman跑了一遍，但是放到实现的前端逻辑上，浏览器打开不知为何还是跨域了，查阅了一些资料无果，恕笔者目前水平有限，暂时还是解决不了这个问题，如果哪位读者有什么高见欢迎与笔者联系探讨。

我们简要的分析下上面这个问题，可以确定的是后端的接口应该是没有问题的，那么问题就出在前端的跨域上，放到代码上去也就是axios的发送put和delete请求的代码的书写上吧，暂时只能推理到这步，初步推测可能缺少一些请求头设置吧。因此我们思考这样一个开发问题，就是后端在接口写好时并用Postman测试可行，把接口给了前端，然后前端不管是用AJAX还是Axios都跨域了，这个时候前端就跑去问后端，你这个接口有问题啊！那么问题来了，前端怎么有理有据地去纠正这个想法呢？我先来一个吧！兄弟，放弃postman吧，改用postwomen。postman又不是浏览器，不存在跨域问题，所以问题自然发现不了，这个是需要注意的一个点。

以下是我的前端逻辑部分代码