Vue-Resource基础介绍

最新推荐文章于 2024-08-09 07:11:22 发布

xyphf_和派孔明

最新推荐文章于 2024-08-09 07:11:22 发布

阅读量1.2k

点赞数

分类专栏： vue.js入门

本文链接：https://blog.csdn.net/xyphf/article/details/83904237

版权

vue.js入门专栏收录该内容

93 篇文章 6 订阅

订阅专栏

vue-resource的请求API是按照REST风格设计的，它提供了7种请求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])

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-resource</title>
   <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="../../node_modules/"></script>
  <script src="../../node_modules/vue-resource/dist/vue-resource.js"></script>
</head>
<body>
<div id="app" class="container">
  <h2>vue-resource插件讲解</h2>
  <a href="javascript:;" class="btn btn-primary" @click="get">发送Get请求</a>
  <a href="javascript:;" class="btn btn-primary" @click="post">发送Post请求</a>
  <a href="javascript:;" class="btn btn-primary" @click="jsonp">发送Jsonp请求</a>
  <a href="javascript:;" class="btn btn-primary" @click="http">发送htttp请求</a>
</div>
<script type="text/javascript">
  new Vue({
    el: "#app",
    data: {

    },
    mounted: function () {
      // 全局拦截器
      Vue.http.interceptors.push(function (request, next) {
        console.log("request init");
        next(function (response) {
          console.log("response init.");
          return response;
        });
      });
    },
    http:{
      // 对全局路径的配置
      root: "api/"
    },
    methods: {
      get: function () {
        this.$http.get("http://www.imooc.com/course/AjaxCourseMembers?ids=796",{
          params: {
            userId: "101"
          },
          headers: {
            token: "abcd"
          }
        }).then(res=>{
          this.msg = res.data;
        },error=>{
          this.msg = error;
        })
      },
      post: function () {
        this.$http.post("package.json",{
          userId: "102"
        },{
          headers:{
            access_token: "abc"
          }
        }).then(function (res) {
            this.msg = res.data;
        });
      },
      jsonp: function () {
        this.$http.jsonp("http://www.imooc.com/course/AjaxCourseMembers?ids=796").then(function (res) {
            this.msg = res.data;
        })
      },
      // 以配置的方式调用
      http: function () {
        this.$http({
          url: "package.json",
          params: {
            userId: "103"
          },
          headers: {
            token: "123"
          },
          timeout: 5,
          before: function () {
            console.log("before init")
          }
        }).then(function (res) {
          this.msg = res.data;
        });
      }
    }
  });
</script>
</body>
</html>