（四）vue-resource实现ajax请求

蔚落 2022-05-26 10:55 91阅读 0赞

在vue中ajax()方法被封装成vue-resource插件，通过在项目中引入该插件，然后调用该插件的的方法或者属性，实现与服务器的通信。

1、首先，在项目中安装本地的vue-resource：假设项目的整个框架已经安装完成，这时候只需要在本地安装vue-resource插件

在cmd中输入“npm install vue-resource --save”

2、安装完成以后，在src/main.js文件中加上下面两句话，就可以使用vue-resource的方法以及属性了

import VueResource from 'vue-resource';
    Vue.use(VueResource);

使用vue-resource插件中使用http对象实现与后台的交互，可以参考官方文档：[点击打开链接][Link 1]

![20180430154436309][]

点击“HTTP Request/Response”选项，可以看到http的一些属性以及方法

3、在App.vue中使用http中的get()方法，实现与后台的通信

//在生命周期函数中去拿到后台返回的数据，这里利用钩子函数created()
        created(){
          this.$http.get('/api/seller').then((res) => {//通过get()方法想后台发送请求
            res = res.body;    //返回的数据
            if( res.errno === ERR_OK ){ //判断请求是否成功，ERR_OK是一个常量，用于判断请求的状态
              //请求成功
              this.seller = res.data; 
              console.log(this.seller);
            }
          });
        }

App.vue中<script>标签中完整的js代码如下

[Link 1]: https://github.com/pagekit/vue-resource
[20180430154436309]: /images/20220526/5742ea9d6a1d4beeb2e250d937d96770.png