zoukankan      html  css  js  c++  java
  • ajax请求插件vue-resource的学习

    1、安装

          npm install vue-resource

    2、使用

          import VueResource from 'vue-resource';

         Vue.use(VueResource);

          this.$http.get("http://localhost/test.php").then(

               function (res) {

                    // 处理成功的结果 alert(res.body);

               },function (res) {

                   // 处理失败的结果

              }

         );

          传递数据到后端

          this.$http.post("http://localhost/test.php",{name:"zhangsan"},{emulateJSON:true}).then(

                  function (res) {

                    // 处理成功的结果

                      alert(res.body);

                   },function (res) {

                  // 处理失败的结果

                  }

                );

       有如下方法:

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

       options

          

    Parameter

    Type

    Description

    url

    string

    URL to which the request is sent

    body

    Object, FormData,string

    Data to be sent as the request body

    headers

    Object

    Headers object to be sent as HTTP request headers

    params

    Object

    Parameters object to be sent as URL parameters

    method

    string

    HTTP method (e.g. GET, POST, ...)

    timeout

    number

    Request timeout in milliseconds (0 means no timeout)

    before

    function(request)

    Callback function to modify the request options before it is sent

    progress

    function(event)

    Callback function to handle the ProgressEvent of uploads

    credentials

    boolean

    Indicates whether or not cross-site Access-Control requests should be made using credentials

    emulateHTTP

    boolean

    Send PUT, PATCH and DELETE requests with a HTTP POST and set the X-HTTP-Method-Override header

    emulateJSON

    boolean

    Send request body as application/x-www-form-urlencoded content type

          response

        

    Property

    Type

    Description

    url

    string

    Response URL origin

    body

    Object, Blob, string

    Response body data

    headers

    Header

    Response Headers object

    ok

    boolean

    HTTP status code between 200 and 299

    status

    number

    HTTP status code of the response

    statusText

    string

    HTTP status text of the response

    Method

    Type

    Description

    text()

    Promise

    Resolves the body as string

    json()

    Promise

    Resolves the body as parsed JSON object

    blob()

    Promise

    Resolves the body as Blob object

    resource可以在全局用:Vue.resource,也可以在组件中使用:this.$resource;方法的调用格式:

    • resource(url, [params], [actions], [options])

    默认调用方法如下所示:

             get: {method:'GET'},

             save: {method:'POST'},

             query: {method:'GET'},

             update: {method:'PUT'},

             remove: {method:'DELETE'},

            delete: {method:'DELETE'}

    eg:

            

    var resource =this.$resource('someItem{/id}');

     1.  resource.get({id:1}).then(response=> {

        this.item=response.body;

      });

    2.  resource.save({id:1}, {item:this.item}).then(response=> {

        // success callback

      }, response=> {

        // error callback

      });

    3. 

     resource.delete({id:1}).then(response=> {

        // success callback

      }, response=> {

        // error callback

      });

    还有其他。。,例子可以结合服务网关zuul来实现数据列表实现

    mounted : function() {
    this.$http.post(contextPath + "/service/getList.json",[]).then(function(response) {
    console.log(response);
    if (response.ok) {
    var body = response.body;
    if (body.status === 200) {
    this.tableData = body.data;
    }
    }
    }, function() {
    console.log(response);
    });
    }

  • 相关阅读:
    python_day3
    python-day2
    python-day1
    【收集】安卓手机在市场占比的网址查找
    while循环
    switch多选择结构
    if选择结构
    顺序结构
    Scanner:求和 、求平均值
    Scanner:用户交互
  • 原文地址:https://www.cnblogs.com/tianlifitting/p/8580855.html
Copyright © 2011-2022 走看看