vue-resource 基本使用

最新推荐文章于 2023-05-31 01:09:58 发布

SpringRolls

最新推荐文章于 2023-05-31 01:09:58 发布

阅读量286

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/SpringRolls/article/details/104919267

版权

前端专栏收录该内容

56 篇文章 4 订阅

订阅专栏

Vue是数据驱动的，在vue中实现异步加载需要使用 vue-resource 库，vue-resource 是Vue.js中的一款插件，它通过XMLHttpRequest 或 JSONP 发起请求并进行处理。

Vue 与后台 Api 进行交互通常是利用 vue-resource来实现的，本质上 vue-resource 是通过 http 来完成 AJAX 请求相应的。Vue 实例对象注册 this.$http 服务，可以发送HTTP请求。解析请求所返回的结果。此外，Vue实例将会自定绑定到this所在的回调函数中。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <!-- 注意：vue-resource 依赖于 Vue，所以先后顺序要注意  -->
  <!-- this.$http.jsonp -->
  <script src="./lib/vue-resource-1.3.4.js"></script>
</head>

<body>
  <div id="app">
    <input type="button" value="get请求" @click="getInfo">
    <input type="button" value="post请求" @click="postInfo">
    <input type="button" value="jsonp请求" @click="jsonpInfo">
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        getInfo() { // 发起get请求
          //  当发起get请求之后， 通过 .then 来设置成功的回调函数
          this.$http.get('http://vue.studyit.io/api/getlunbo').then(function (result) {
            // 通过 result.body 拿到服务器返回的成功的数据
            // console.log(result.body)
          })
        },
        postInfo() { // 发起 post 请求   application/x-wwww-form-urlencoded
          //  手动发起的 Post 请求，默认没有表单格式，所以，有的服务器处理不了
          //  通过 post 方法的第三个参数， { emulateJSON: true } 设置 提交的内容类型 为 普通表单数据格式
          this.$http.post('http://vue.studyit.io/api/post', {}, { emulateJSON: true }).then(result => {
            console.log(result.body)
          })
        },
        jsonpInfo() { // 发起JSONP 请求
          this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result => {
            console.log(result.body)
          })
        }
      }
    });
  </script>
</body>

</html>

关于this.$http， vue-resource提供了其中请求API：

get(url, [options])
head(url, [options])
delete(url, [options])
jsonp(url, [options])
post(url, [body], [options])
put(url, [body], [options])
patch(url, [body], [options])

其中的参数说明

url：请求的地址
body：请求发送的数据
options：返回的都是promise对象

SpringRolls

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-resource 基本使用

Vue是数据驱动的，在vue中实现异步加载需要使用 vue-resource 库，vue-resource 是Vue.js中的一款插件，它通过XMLHttpRequest 或 JSONP 发起请求并进行处理。Vue 与后台 Api 进行交互通常是利用 vue-resource来实现的，本质上 vue-resource 是通过 http 来完成 AJAX 请求相应的。Vue 实例对象注册thi...
复制链接

扫一扫

专栏目录