将以在Vue中的使用为例,讲解axios方面的内容。
1.axios是什么及其特性?
Axios是一个基于Promise的HTTP库,可以使用于浏览器(客户端)和nodeJS(服务端)。
特性:1.支持promise API;2.拦截请求和响应(如:可以在请求发送之前在请求头添加授权信息等);3.转换请求数据和响应数据(如:加密解密);4.取消请求;5.自动转换JSON数据;6.客户端支持防御XSRF。
2.简单使用举例及说明
data.json文件是自己在public文件下创建的,内容如下:
本次请求的方式为get方法,请求成功后会返回一个res结果,并将该结果res打印到控制台。控制出现如下页面即请求成功:
data.data即为上面自己创建的json数据。
3.axios常用的5种请求方式
(1)get:获取数据
(2)post:新建,即提交数据(表单提交或文件上传等)
(3)put:编辑数据,即更新数据(推送全部数据至后端)
(4)patch:编辑数据,即更新数据(只推送修改过的数据至后端)
(5)delete:删除数据
get和delete方法有两个参数(url,config),post,put,patch有三个参数(url,data,config)
get:
图中的两种写法都可以。
post:
常用的提交的数据格式有两种:form-data(表单提交,图片,文件等的上传) 和 application/json(用的比较广)
application/json示例:
form-data示例:
'/post'路径是自定义的一个假接口,访问不到,只是用于举例说明。
put:
'/put'路径是自定义的一个假接口,访问不到,只是用于举例说明。
patch:
'/patch'路径是自定义的一个假接口,访问不到,只是用于举例说明。
delete:
注意第二个参数写params和data的区别(注释)!
4.并发请求
定义:同时进行多个请求,并统一处理返回值。
(应用举例:如一个聊天系统,需要同时请求个人信息和好友列表,因为这是两个接口,但是又需要统一处理两个接口返回的数据,这时就需要并发请求了)
axios.all(arr) 内部参数为数组,该arr数组是由一个个axios请求组成
axios.spread() 当axios.all() 请求成功后,将返回的数据一个个分割,进行统一处理
注:data.json和city.json都是自己在public目录中自定义的文件。
更多axios方面的进阶知识可以翻阅作者的其他文章。