• 定义：Axios是一个基于promise 的 HTTP 库，可以用在浏览器和 node.js中。
• 原理：Axios本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范。

1、安装Axios

yarn add axios

2、引入axios依赖

import axios from 'axios'

3、将axios全局挂载到Vue原型上

Vue.prototype.$http = axios;

4、发出请求get 以cnode社区API为例子

使用传统function

<script>
      //$zhou自定义
Vue.prototype.$zhou = axios;
import axios from 'axios';
import Vue from 'vue';
export default {
  name: 'HelloWorld',
  data() {
    return {
      items: []
    }
  },
  methods: {
    getData() {
      var self = this;
      this.$zhou.get('https://cnodejs.org/api/v1/topics')//绝对路径
        .then(function (e) {
        //箭头函数.then(e=>){this.items = e.data.data;}
          self.items = e.data.data;
          console.log(e.data.data);
        })
        .catch(function (err) {
          console.log(err);
        })
    }

  }
}
</script>

两种加参数的请求方式

this.$zhou.get('https://cnodejs.org/api/v1/topics', {
        params: {
          page: 1,
          limit: 10
        }
      })
 =============================================
 this.$zhou.get('https://cnodejs.org/api/v1/topics? page=1&limit=10')

使用CNODE社区官方的API为例展开学习

获取主题列表API：cnodejs.org/api/v1/topi…

参数：page页码

limit 每页显示的数量

5、Axios之post请求详解

postData() {

    this.$zhou.post(url, qs.stringify({
      page: 1,
      limit: 20
    }))
      .then(e => {
        this.items = e.data.data;
        console.log(e.data.data);
      })
      .catch(function (err) {
        console.log(err);
      })
  
}

POST传递数据有两种格式：

form-data ?page=1&limit=48

x-www-form-urlencoded { page: 1,limit: 10 }

在axios中，post请求接收的参数必须是form-data

使用qs插件—qs.stringify