和服务端通信

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

    • 原生的
    • 原生的 Fetch
    • 也可以结合使用 jQuery 自带的 请求函数
    • 早期大家开发 Vue 应用喜欢使用一个第三方插件：Vue Resource
    • …

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

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

    浏览器支持

    安装

    使用 npm:

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

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

    示例

    执行一个 GET 请求

    执行一个 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() {
    3. }
    5. function getUserPermissions() {
    6. }
    8. axios.all([getUserAccount(), getUserPermissions()])
    9.   .then(axios.spread(function (acct, perms) {
    10.     // Both requests are now complete
    11.   }));

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

    axios(config)

    1. // GET request for remote image
    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. });
    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

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