最新axios快速入门教程

你的名字 2023-10-03 19:41 8阅读 0赞

![2c831a7a827b447fb32ed4c23e15c6b2.png][]

**目录**

1、axios是什么

2、axios如何安装

（1）使用npm方式进行安装

（2）使用bower方式进行安装

（3）使用cdn方式进行安装

3、axios使用案例

（1）get请求方式

（2）post请求方式

4、整合vue-axios

（1）安装vue-axios

（2）在main.js中加入

（3）vue-axios使用方法

--------------------

## 1、axios是什么 ##

> Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
> 
> 官网文档地址：[http://axios-js.com/docs/][http_axios-js.com_docs]

## 2、axios如何安装 ##

### （1）使用npm方式进行安装 ###

npm install axios

### （2）使用bower方式进行安装 ###

bower install axios

### （3）使用cdn方式进行安装 ###

## 3、axios使用案例 ##

### （1）get请求方式 ###

将请求参数拼接到url中

将请求参数放到params中

axios.get('/user', {
        params: {
          ID: 12345
        }
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      })
      .then(function () {
        // always executed
      });

想要使用异步/等待？在外部函数/方法中添加'async'关键字。

async function getUser() {
      try {
        const response = await axios.get('/user?ID=12345');
        console.log(response);
      } catch (error) {
        console.error(error);
      }
    }

### （2）post请求方式 ###

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

执行多个并发请求

## 4、整合vue-axios ##

### （1）安装vue-axios ###

npm install --save axios vue-axios

### （2）在main.js中加入 ###

import Vue from 'vue'
    import axios from 'axios'
    import VueAxios from 'vue-axios'
    
    Vue.use(VueAxios, axios)

### （3）vue-axios使用方法 ###

这里以get请求方式举例说明，其它请求方式类似。

Vue.axios.get(api).then((response) => {
      console.log(response.data)
    })
    
    this.axios.get(api).then((response) => {
      console.log(response.data)
    })
    
    this.$http.get(api).then((response) => {
      console.log(response.data)
    })

[2c831a7a827b447fb32ed4c23e15c6b2.png]: https://img-blog.csdnimg.cn/2c831a7a827b447fb32ed4c23e15c6b2.png
[http_axios-js.com_docs]: http://axios-js.com/docs/