最新axios快速入门教程

目录

​​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/​​

2、axios如何安装

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

npm install axios

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

bower install axios

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

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

3、axios使用案例

（1）get请求方式

将请求参数拼接到url中

const axios = require('axios');

axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });

 将请求参数放到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);
  });

执行多个并发请求

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) {
    //2个post请求现已完成
  }));

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