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

曾经终败给现在 2023-10-05 12:07 5阅读 0赞

**目录**

一、概述

二、特点

三、文档说明

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/][http_www.axios-js.com_zh-cn_docs]

# 二、特点 #

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

# 三、文档说明 #

## 1、安装 ##

### 使用 npm： ###

$ npm install axios

### 使用 bower： ###

$ bower install axios

### 使用 cdn： ###

## 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);
      });

### 执行多个并发请求： ###

## 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');

[http_www.axios-js.com_zh-cn_docs]: http://www.axios-js.com/zh-cn/docs/