vue headers修改为json_Vue中发送ajax请求的库有哪些？

一、vue-resource

在Vue中实现异步加载需要使用到vue-resource库，利用该库发送ajax（Vue官方已不再维护这个库）。

1、引入vue-resource：<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>

要注意的是，vue-resource依赖于Vue，所以要先引入Vue，再引入vue-resource。

引入vue-resource之后，在Vue的全局上会挂载一个$http方法，在vm.$http方法上有一系列方法，每个HTTP请求类型都有一个对应的方法。

vue-resource使用了promise，所以$http中的方法的返回值是一个promise。

2、请求方法：

1）POST请求：用于提交数据

常用data格式：

- 表单提交：multipart / form-data，比较老的网站会使用表单提交去获取数据，现在基本都不用表单提交，而是使用ajax，但是现在表单提交仍然存在，有时候需要做图片上传、文件上传。

- 文件上传：application / json，现在大多数情况下都是用这个格式。

使用方法：vm.$http.post(url, [body], [options])

- url: 必需，请求目标url

- body: 非必需，作为请求体发送的数据

- options：非必需，作为请求体发送的数据

html:

css:

js:

当数据提交成功时：

当数据提交发生错误时：

2）GET请求：用于获取数据

使用方法：vm.$http.get(url, [options])

html:

css: 和上面一样

js:

3）PUT请求：更新数据，将所有的数据全都推送到后端

使用方法：vm.$http.put(url, [body], [config])

4）PATCH请求：更新数据，只将修改的数据全都推送到后端

使用方法：vm.$http.patch(url, [body], [config])

5）DELETE请求：删除数据

使用方法：vm.$http.delete(url, [config])

6）HEAD请求：请求头部信息

使用方法：vm.$http.head(url, [config])

7）JSONP请求：

除了jsonp以外，以上6种的API名称是标准的HTTP方法。

使用方法：vm.$http.jsonp(url, [options]);

html:

css: 和上面一样

js:

3、options 参数说明：

参数 | 类型 | 描述

url | String | 请求目标url |

body | Object, FormData, string | 作为请求体发送的数据 |

headers | Object | 作为请求头部发送的头部对象 |

params | Object | 作为URL参数的参数对象 |

method | String | HTTP方法 (例如GET，POST，...) |

responseType | String | 设置返回数据的类型 |

timeout | Number | 在请求发送之前修改请求的回调函数 |

credentials | Boolean | 是否需要出示用于跨站点请求的凭据 |

emulateHTTP | Boolean | 是否需要通过设置X-HTTP-Method-Override头部并且以传统POST方式发送PUT，PATCH和DELETE请求。 |

emulateJSON | Boolean | 设置请求体的类型为application/x-www-form-urlencoded |

before | function(request) | 在请求发送之前修改请求的回调函数 |

uploadProgress | function(event) | 用于处理上传进度的回调函数 |

downloadProgress | function(event) | 用于处理下载进度的回调函数 |

4、响应对象：

通过如下属性和方法处理一个请求获取到的响应对象。

1）属性

属性 | 类型 | 描述

url | String | 响应的 URL 源 |

body | Object, Blob, string | 响应体数据 |

headers | Header | 请求头部对象 |

ok | Boolean | 当 HTTP 响应码为 200 到 299 之间的数值时该值为 true |

status | Number | HTTP 响应码 |

statusText | String | HTTP 响应状态

2）方法

方法 | 描述

text() | 以字符串方式返回响应体 |

blob() | 以二进制 Blob 对象方式返回响应体 |

json() | 以格式化后的 json 对象方式返回响应体 |

二、Axios

Axios是一个基于promise的HTTP库。

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

1、引入：<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2、API：

- axios(config)

- axios(url, [config])

3、config 配置对象：

最常用的配置：

4、方法别名：

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

- 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])

1）GET请求：

html：

css：

js：

使用axios.get(url, [config])：

2）POST请求：

5、配置默认值：

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

1）全局配置

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

2）实例配置

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

3）请求配置

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

4）并发

同时进行多个请求，并统一处理返回值。

- axios.all(iterable)

- axios.spread(callback)

6、拦截器

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

1）请求拦截器

2）响应拦截器

3）移除拦截器

没有移除拦截的时候，

移除拦截器之后，

4）为axios实例添加拦截器

7、取消请求

用于取消正在进行的http请求。

8、错误处理

在请求错误时进行的处理。

request / response 是error的上下文，标志着请求发送 / 得到响应

在错误中，如果响应有值，则说明是响应时出现了错误。

如果响应没值，则说明是请求时出现了错误。

在错误中，如果请求无值，则说明是请求未发送出去，如取消请求。

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

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

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

9、axios 预检

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