VUE进阶篇Part11（vue-route和前端状态管理）---中

此章节内容包括：

1、Axios中的get请求
2、Axios中的post请求

1、Axios的get请求

ajax的作用是与服务端进行数据交互，并且从服务端拿到所需要的数据，说白了就是两句话：

发送请求，拦截响应。

这里的 axios 的作用和 ajax 的作用基本上是一样的，用法上可能会有点区别。

官方一点的说法是：axios 是一个基于 Promise 用于浏览器和 nodejs 的 HTTP 客户端，他本身具有以下特性：

1. 从浏览器中创建 XMLHttpRequest
2. 从 node.js 发出 http 请求
3. 支持 Promise API
4. 拦截请求和响应
5. 转换请求和响应数据
6. 取消请求
7. 自动转换JSON数据
8. 客户端支持防止 CSRF/XSRF

使用方法

1、安装

npm install axios

2、引入加载

在使用到axios 以 .vue 结尾的组件内引入，如 HelloWorld.vue

import axios from 'axios'

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

直接在其中一个组件上输入以下代码就可以，后面可以使用 this.$http 发送请求

Vue.prototype.$http = axios

写在一起就是：

<template>
  <div class="hello">
    <h3>我是axios用来发送请求，拦截响应</h3>
  </div>
</template>

<script>

Vue.prototype.$http = axios
import axios from 'axios'

export default {
  name: 'sendget',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
}
</script>

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

使用传统的function写法：

<template>
  <div class="hello">
    <h3>我是axios用来发送请求，拦截响应</h3>
    <button v-on:click="getDate()">发送请求</button>

    <ul>
      <li v-for="item in items">{{items.title}}</li>
    </ul>
  </div>
</template>

<script>
//这里用到了vue，记得也要引入一下
import Vue from "vue";
import axios from "axios";

Vue.prototype.$http = axios;

export default {
  name: "sendget",
  data() {
    return {
      items: []
    };
  },
  methods: {
    getDate() {
      //2、提前将此处的this赋值给self，因为这时候的this还是vue实例，下面通过self就可以拿到vue实例了
      var self = this;
      this.$http
        .get("https://cnodejs.org/api/v1/topics")
        //成功后调用的函数
        .then(function(res) {
          //1、此处方法内的this并不代表当前vue实例，代表的是window对象
          //this.items = res.data.data;
          self.items = res.data.data;
          console.log(res.data.data);
        })
        //失败后调用的函数
        .catch(function(err) {
          console.log(err);
        });
    }
  }
};
</script>

但是推荐使用 es6 的写法，上面的可以写成下面的：

<template>
  <div class="hello">
    <h3>我是axios用来发送请求，拦截响应</h3>
    <button v-on:click="getDate()">发送请求</button>
    <ul>
      <li v-for="item in items">{{items.title}}</li>
    </ul>
  </div>
</template>

<script>
//这里用到了vue，记得也要引入一下
import Vue from "vue";
import axios from "axios";

Vue.prototype.$http = axios;

export default {
  name: "sendget",
  data() {
    return {
      items: []
    };
  },
  methods: {
    getDate() {
      var self = this;
      //这里直接在api后面写参数，写在params里面
      this.$http.get("https://cnodejs.org/api/v1/topics", {
        params: {
          page: 1,
          limit: 20
        }
      });
      //或者直接把参数写在api上，效果也是一样的
      //this.$http.get('https://cnodejs.org/api/v1/topics?page=1&limit=20')

      //使用ES6语法写的
      .then(res => {
      	this.items = res.data.data
      	console.log(res)
      })
      .catch(err => {
      	console.log(err)
      })
    }
  }
};
</script>

这里使用CNODE社区官方的API为例展开学习
获取主题列表API：https://cnodejs.org/api/v1/topics
参数：
page - 页码
limit - 每页显示的数量

结果为：

2、Axios中的post请求

POST传递数据有两种格式：

第一种：form­data 格式：xxx/xxx?page=1&limit=48
第二种：xwww­form­urlencoded { page: 1,limit: 10 }

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

用qs插件将post传过去的数据是第2种格式，要将这个数据通过 qs.stringify() 处理一下，转换为第1种才能接收到

用法：

1、先下一个qs插件

npm install qs

2、引入一下 qs

import qs from 'qs'

qs.stringify() 可以对post过去的数据做处理

3、处理一下

<template>
  <div class="hello">
    <h3>我是axios用来发送请求，拦截响应</h3>
    <button v-on:click="getDate()">GET发送请求</button>
    <button v-on:click="postDate()">POST发送请求</button>
    <ul>
      <li v-for="item in items">{{items.title}}</li>
    </ul>
  </div>
</template>

<script>
//这里用到了vue，记得也要引入一下
import Vue from "vue";
import axios from "axios";
//引入一下 qs
import qs from "qs";

Vue.prototype.$http = axios;

export default {
  name: "sendget",
  data() {
    return {
      items: []
    };
  },
  methods: {
    //使用postDate接受请求
    postDate() {
      this.$http
        //post请求里面不能直接在连接后面写参数，并且传递的数据需要qs.stringify()处理一下
        .post("https://cnodejs.org/api/v1/topics",qs.stringify({
            params: {
              page: 1,
              limit: 20
            }
          })
        )
        .then(res => {
          this.items = res.data.data;
          console.log(res);
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

3、vuex中的store用法