将以在Vue中的使用为例,讲解axios方面的内容。

1.axios是什么及其特性?

Axios是一个基于Promise的HTTP库,可以使用于浏览器(客户端)和nodeJS(服务端)。

特性:1.支持promise API;2.拦截请求和响应(如:可以在请求发送之前在请求头添加授权信息等);3.转换请求数据和响应数据(如:加密解密);4.取消请求;5.自动转换JSON数据;6.客户端支持防御XSRF。

2.简单使用举例及说明

axios怎么返回前端 vue axios返回的是什么_axios怎么返回前端 vue

data.json文件是自己在public文件下创建的,内容如下:

axios怎么返回前端 vue axios返回的是什么_axios怎么返回前端 vue_02

本次请求的方式为get方法,请求成功后会返回一个res结果,并将该结果res打印到控制台。控制出现如下页面即请求成功:

axios怎么返回前端 vue axios返回的是什么_ios_03

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:

axios怎么返回前端 vue axios返回的是什么_数据_04

图中的两种写法都可以。

post:

常用的提交的数据格式有两种:form-data(表单提交,图片,文件等的上传)  和  application/json(用的比较广)

application/json示例:

axios怎么返回前端 vue axios返回的是什么_ios_05

form-data示例:

axios怎么返回前端 vue axios返回的是什么_数据_06

'/post'路径是自定义的一个假接口,访问不到,只是用于举例说明。

put:

axios怎么返回前端 vue axios返回的是什么_json_07

'/put'路径是自定义的一个假接口,访问不到,只是用于举例说明。

patch:

axios怎么返回前端 vue axios返回的是什么_json_08

'/patch'路径是自定义的一个假接口,访问不到,只是用于举例说明。

delete:

axios怎么返回前端 vue axios返回的是什么_数据_09

axios怎么返回前端 vue axios返回的是什么_axios怎么返回前端 vue_10

注意第二个参数写params和data的区别(注释)!

4.并发请求

定义:同时进行多个请求,并统一处理返回值。

(应用举例:如一个聊天系统,需要同时请求个人信息和好友列表,因为这是两个接口,但是又需要统一处理两个接口返回的数据,这时就需要并发请求了)

axios.all(arr   内部参数为数组,该arr数组是由一个个axios请求组成

axios.spread()  当axios.all() 请求成功后,将返回的数据一个个分割,进行统一处理

axios怎么返回前端 vue axios返回的是什么_ios_11

注:data.json和city.json都是自己在public目录中自定义的文件。

更多axios方面的进阶知识可以翻阅作者的其他文章。