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

亦凉 2022-01-17 06:55 153阅读 0赞

此章节内容包括：

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][https_cnodejs.org_api_v1_topics]  
参数：  
page - 页码  
limit - 每页显示的数量

##### 结果为： #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNzYwNA_size_16_color_FFFFFF_t_70]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNzYwNA_size_16_color_FFFFFF_t_70 1]

#### 2、Axios中的post请求 ####

POST传递数据有两种格式：

第一种：formdata 格式：xxx/xxx?page=1&limit=48  
第二种：xwwwformurlencoded \{ page: 1,limit: 10 \}

在axios中，post请求接收的参数必须是formdata

用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用法 ####

[https_cnodejs.org_api_v1_topics]: https://cnodejs.org/api/v1/topics
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNzYwNA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019061221324247.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNzYwNA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNzYwNA_size_16_color_FFFFFF_t_70 1]: /images/20220117/ca58b066cff24157b65fd086356cdecd.png