jquery发送ajax请求_复习之Vue用axios发送ajax请求

Axios是一个基于promise的HTTP库。

浏览器支持情况：Chrome、Firefox、Safari、Opera、Edge、IE8+。

官网：/axios/axios

如何使用？

下载安装axios：npm install axios

直接引入：<script src="/axios/dist/axios.min.js"></script>

API：

axios(config) 、 axios(url, [config])

最常用的配置：

axios

方法别名：

为方便起见，为所有支持的请求方法提供了别名。

- axios.request(config)- axios.get(url, [config])- axios.post(url, [data], [config]])

- axios.delete(url, [config])

- axios.head(url, [config])

- axios.put(url, [data], [config])

- axios.patch(url, [data], [config]])

- axios.options(url, [config])

配置默认值：

可以指定将被用在各个请求的配置默认值。

全局配置

axios

在实际项目中，很少用全局配置。

实例配置

可以使用自定义配置新建一个axios实例。

const

请求配置

const

配置的优先顺序：全局 < 实例 < 请求

怎样同时进行多个请求？

axios.all(iterable) 、 axios.spread(callback)

axios

拦截器interceptors：

interceptors，在发起请求之前做一些处理，或者在响应回来之后做一些处理。

请求拦截器

axios

响应拦截器

axios

移除拦截器

const

如何为axios实例添加拦截器？

const

如何取消正在进行的http请求？

const

请求错误时进行的处理如下：

request / response 是error的上下文，标志着请求发送 / 得到响应。在错误中，如果响应有值，则说明是响应时出现了错误。如果响应没值，则说明是请求时出现了错误。在错误中，如果请求无值，则说明是请求未发送出去，如取消请求。

axios

在实际开发过程中，一般在拦截器中统一添加错误处理。

请求拦截器中的错误，会当请求未成功发出时执行，但是要注意的是：取消请求后，请求拦截器的错误函数也不会执行，因为取消请求不会抛出异常，axios对其进行了单独的处理。

在更多的情况下，我们会在响应拦截器中处理错误。

const

axios 预检

当axios的请求为非简单请求时，浏览器会进行预检，及发送OPTIONS请求。请求到服务器，询问是否允许跨域。如果响应中允许预检中请求的跨域行为，则浏览器会进行真正的请求。否则会报405错误。