【axios】001-axios概述、特点、文档说明

目录

一、概述

二、特点

三、文档说明

1、安装

使用 npm：

使用 bower：

使用 cdn：

2、简单案例

执行 GET 请求：

执行 POST 请求：

执行多个并发请求：

3、axios API

axios(config)：

axios(url[, config])：

---

一、概述

【官方slogan】易用、简洁且高效的http库；

是前端最流行的ajax请求库，轻量级的；

react/vue 官方都推荐使用axios发ajax请求；

中文文档地址：http://www.axios-js.com/zh-cn/docs/

二、特点

• 是基于promise的异步ajax请求库；
• 浏览器端和node端都可以使用；
• 支持请求/响应拦截器；
• 支持请求取消；
• 请求/响应数据转换；
• 批量发送多个请求；

三、文档说明

1、安装

使用 npm：

$ npm install axios

使用 bower：

$ bower install axios

使用 cdn：

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

2、简单案例

执行 GET 请求：

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 上面的请求也可以这样做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

执行 POST 请求：

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

执行多个并发请求：

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));

3、axios API

可以通过向 axios 传递相关配置来创建请求；

axios(config)：

// 发送 POST 请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

// 获取远端图片
axios({
  method:'get',
  url:'http://bit.ly/2mTM3nY',
  responseType:'stream'
})
  .then(function(response) {
  response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
});

axios(url[, config])：

// 发送 GET 请求（默认的方法）
axios('/user/12345');