专栏首页前端路桥Javascript[0x08] -- axios基础应用

Javascript[0x08] -- axios基础应用

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的拦截器

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

错误处理

这块在实战部分也不涉及,就是说在我们进行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又不是浏览器,不存在跨域问题,所以问题自然发现不了,这个是需要注意的一个点。

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

既然这样,老哥,那我就先不跨了,最开始我们不是说axios是一个基于Promise的HTTP库,放到前台就是浏览器的xhr请求,放到后台就是node.js的request请求,好,那我们就去后台验证结果。

附上我的代码:

我们更新id为2的那条记录,然后删除id为1的记录,可以看到它是可以进行更新和删除的

以上就是本次实验的全部内容,大致是阅读完axios基础部分设计的一些例子,希望能够帮助读者更好地掌握这块的知识吧,一起来动手试一下吧。

本文分享自微信公众号 - 前端路桥(ataola),作者:丰臣正一

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-03-01

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Javascript[0x07] -- Promise初探

    注意: 状态一旦转换将不可逆, 返回的是一个promise对象,并不是所有都支持promise

    丰臣正一
  • 震惊!JS随机数历险重大发现

    今天,我本来是想写关于福利彩票的随机数相关内容的,素材数据我都备好了,有福彩“15选5”、福利“6+1”、“七乐彩”、“3D”、“福利双色球”等等,但是考虑到放...

    丰臣正一
  • FE[0x03] -- 如何合理科学地设计网页元素间距

    这个话题有点哲学,我们很难去给美下定义,因为每个人对美的定义不同,得到的答案也不一样。在天朝古代历史上,有那么一段时光是以胖妞为美女的,也有那么一段时光是以瘦妞...

    丰臣正一
  • 使用Fiddler进行抓包

    jmeter技术研究
  • 7.Elasticsearch请求体查询

    本文目录: - 请求体查询 - 空查询 - from 和size - 注意get请求

    IT云清
  • 实战:异步爬取之初识异步

    许多之前没有听说过异步地朋友可能看到标题地第一反应就是:什么是异步?为什么要用异步?

    渔父歌
  • Android训练课程(Android Training) - 使用Volley传输网络数据(Transmitting Network Data Using Volley)

    Volley 是一个 HTTP 库,它使得在Android应用程序中操作网络更容易,是重要的,更多快速的。Volley 属于“开放源代码项目”。.

    zhangyunfeiVir
  • 【AI Top10】北京地铁安检将设人脸识别,特斯拉Q1净亏扩大至3.3亿美元,各国政府加大AI投资

    新智元每日AI TOP 10 新智元 “每日AI ·TOP 10” 是新智元从 2017年5月起推出的一档快读栏目,精选汇集每日国内外最重大产业新闻,第一...

    新智元
  • 你必须掌握动态规划——LeetCode题目5:最长回文子串

    原题链接:https://leetcode-cn.com/problems/longest-palindromic-substring

    二环宇少
  • RESTFUL API 安全设计指南

    REST的全称是REpresentational State Transfer,表示表述性无状态传输,无需session,所以每次请求都得带上身份认...

    lyb-geek

扫码关注云+社区

领取腾讯云代金券