和服务端通信

Vue 不像 jQuery 内置了 ajax 请求函数，在 Vue 中没有提供这样的功能。所以当我们需要在 Vue 中和服务端进行通信的时候可选择的方式会更灵活一些。

注意：Vue 不提供的原因是为了让 Vue 本身更专注于视图部分，保持其渐进灵活的特性。

所以 Vue 给了我们更多的选择空间，例如我们可以使用下面的可选方案：

  • 原生的 XMLHttpRequest
  • 原生的 Fetch
  • 也可以结合使用 jQuery 自带的 Ajax 请求函数
  • 早期大家开发 Vue 应用喜欢使用一个第三方插件：Vue Resource
  • 目前主流的方案是使用社区中知名的第三方库 axios
  • …

axios

axios 是一个基于 Promise 的第三方 HTTP 客户端请求库，可以用于浏览器或者 Node.js。
axios 本身和 Vue 没有一毛钱关系，只是简单纯粹的封装了 HTTP 请求功能。可以运行在任何支持 JavaScript 环境的平台。
所以和 Vue 结合使用也是没有任何问题的。

特色

  • 在浏览器端使用的是 XMLHttpRequest
  • 在 Node 中使用的是 http
  • 支持 Promise
  • 支持请求拦截和响应拦截
  • 支持转换请求和响应数据
  • 支持取消请求
  • 自动转换 JSON 数据
  • 客户端支持防止 XSRF

浏览器支持

安装

使用 npm:

  1. $ npm install axios

使用 bower（一个类似于 npm 的包管理工具，几乎已经淘汰）:

  1. $ bower install axios

使用 cdn:

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

示例

执行一个 GET 请求

  1. // Make a request for a user with a given ID
  2. axios.get('/user?ID=12345')
  3.   .then(function (response) {
  4.     console.log(response);
  5.   })
  6.   .catch(function (error) {
  7.     console.log(error);
  8.   });
  10. // Optionally the request above could also be done as
  11. axios.get('/user', {
  12.     params: {
  13.       ID: 12345
  14.     }
  15.   })
  16.   .then(function (response) {
  17.     console.log(response);
  18.   })
  19.   .catch(function (error) {
  20.     console.log(error);
  21.   });

执行一个 POST 请求

  1. axios.post('/user', {
  2.     firstName: 'Fred',
  3.     lastName: 'Flintstone'
  4.   })
  5.   .then(function (response) {
  6.     console.log(response);
  7.   })
  8.   .catch(function (error) {
  9.     console.log(error);
  10.   });

执行多个并发请求

  1. function getUserAccount() {
  2.   return axios.get('/user/12345');
  3. }
  5. function getUserPermissions() {
  6.   return axios.get('/user/12345/permissions');
  7. }
  9. axios.all([getUserAccount(), getUserPermissions()])
  10.   .then(axios.spread(function (acct, perms) {
  11.     // Both requests are now complete
  12.   }));

axios API

我们可以像使用 $.ajax() 一样来使用 axios.

axios(config)

  1. // Send a POST request
  2. axios({
  3.   method: 'post',
  4.   url: '/user/12345',
  5.   data: {
  6.     firstName: 'Fred',
  7.     lastName: 'Flintstone'
  8.   }
  9. });
  1. // GET request for remote image
  2. axios({
  3.   method:'get',
  4.   url:'http://bit.ly/2mTM3nY',
  5.   responseType:'stream'
  6. })
  7.   .then(function(response) {
  8.   response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
  9. });

axios(url[, config])

  1. // Send a GET request (default method)
  2. axios('/user/12345');

请求方法别名

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

  • axios.request(config)
  • axios.get(url[, config])
  • axios.delete(url[, config])
  • axios.head(url[, config])
  • axios.options(url[, config])
  • axios.post(url[, data[, config]])
  • axios.put(url[, data[, config]])
  • axios.patch(url[, data[, config]])

注意：当使用了这些别名方法时，url, method 和 data 属性不需要声明在配置对象中。

并发请求

axios 提供了辅助函数用来处理并发请求。

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

创建一个 axios 实例

实例方法

请求配置对象

响应体结构

默认配置

全局配置

局部配置

配置优先顺序

拦截器

处理错误

取消请求

使用 application/x-www-form-urlencoded

By default, axios serializes JavaScript objects to JSON. To send data in the application/x-www-form-urlencoded format instead, you can use one of the following options.

浏览器端

Node.js

Promises

axios 依赖原生的 EcmaScript 6 Promise 支持。
如果你的运行环境不支持 EcmaScript 6 Promise，你可以使用 ployfill.