axios 全攻略之基本介绍与使用（GET 与 POST）

古城微笑少年丶 2022-06-09 05:11 216阅读 0赞

# axios #

> axios 是一个基于 Promise 的 HTTP 客户端，专门为浏览器和 node.js 服务

Vue 2.0 官方推荐使用 axios 来代替原来的 Vue request，所以这里介绍一下 axios 的功能和基本的使用方法，希望能够对各位所有帮助。^\_^

## 功能 ##

*  在浏览器中发送 XMLHttpRequests 请求
 *  在 node.js 中发送 http 请求
 *  支持 Promise API
 *  拦截请求和响应
 *  转换请求和响应数据
 *  取消请求
 *  自动转换 JSON 数据格式
 *  客户端支持防范 XSRF 攻击

## 浏览器支持 ##

axios 能够支持 IE7 以上的 IE 版本，同时能够支持大部分主流的浏览器，需要注意的是，你的浏览器需要支持 Promise，才能够使用 axios。所以比较好的做法是先安装 polyfill，然后再使用 axios。

## 安装 ##

**Using npm:**

`$ npm install axios`

**Using bower:**

`$ bower install axios`

**Using cdn:**

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

## 使用 ##

这里以 Vue 为例：在 NPM 中安装 axios 之后，需要在 main.js 文件中引用 package

`import axios from 'axios'`

然后全局绑定

`Vue.prototype.$http = axios`

然后可以在 .vue 文件中使用 `$http` 来代替 `axios`

### GET ###

// Make a request for a user with a given ID 
    axios.get('/user?ID=12345')
      .then(function (response) { 
        console.log(response);
      })
      .catch(function (error) { 
        console.log(error);
      });
    
    // Optionally the request above could also be done as 
    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);
      });

### 同时发送多个请求 ###

当然，axios 的功能还包括 axios API、interceptor 等等，这里想要详细了解的可以查看官方文档：[axios][]，后面陆续会介绍下 interceptor 的使用和各类参数的配置。

[axios]: https://www.npmjs.com/package/axios