DOCSEARCHbyAlgolia
Submit Docs

vue-resource Documentation

repository·develop·Indexed 27 days ago

https://github.com/pagekit/vue-resource

An HTTP client plugin for Vue.js (version 1.5.3) that provides services for making web requests and handling responses using XMLHttpRequest or JSONP. It includes features for managing HTTP requests/responses, global and instance-specific configuration, interceptors, and support for FormData and TypeScript.

Tokens
5.4K
Snippets
15
Records
41
Agent score
94%

What's inside vue-resource

  1. Explore vue-resource documentation

    develop

    The vue-resource documentation is organized into several key areas to help you manage HTTP requests and resources within Vue applications:

    • Configuration: Learn how to set up global and request-specific settings.
    • HTTP Requests/Response: Understand how to handle outgoing requests and incoming responses.
    • Creating Resources: Learn the patterns for defining and using resources.
    • Code Recipes: Find practical implementation examples and common patterns.
    • API Reference: Access the full technical specification of the library's public API.

  2. Configure global defaults for vue-resource

    develop

    You can set global default values for all requests using the Vue.http.options and Vue.http.headers objects.

    • Use Vue.http.options.root to set a base path for relative URLs.
    • Use Vue.http.headers.common to set headers that will be included in every request.

    Important: The root option only applies to relative paths. For example, Vue.http.get('someUrl') will use the root, but Vue.http.get('/someUrl') will not.

    Vue.http.options.root = '/root';
Vue.http.headers.common['Authorization'] = 'Basic YXBpOnBhc3N3b3Jk';

  4. Implement HTTP interceptors

    develop

    Interceptors can be defined globally via Vue.http.interceptors.push() for pre- and post-processing. If using this.$http or this.$resource, the current Vue instance is available as this in the callback.

    Request processing

    Modify the request object before it is sent:

    Vue.http.interceptors.push(function(request) {
  request.method = 'POST';
  request.headers.set('X-CSRF-TOKEN', 'TOKEN');
});

    Request and Response processing

    Return a function from the interceptor to modify the response:

    Vue.http.interceptors.push(function(request) {
  request.method = 'POST';
  return function(response) {
    response.body = '...';
  };
});

    Stop processing and return a custom response

    Use request.respondWith() to bypass the actual network request and return a custom response:

    Vue.http.interceptors.push(function(request) {
  return request.respondWith(body, {
    status: 404,
    statusText: 'Not found'
  });
});

  5. Configure vue-resource defaults in Vue component options

    develop

    Instead of global configuration, you can define http options directly within your Vue instance configuration. This allows for instance-specific defaults for root and headers.

    new Vue({

  http: {
    root: '/root',
    headers: {
      Authorization: 'Basic YXBpOnBhc3N3b3Jk'
    }
  }

})

  8. Install and setup vue-resource with Webpack or Browserify

    develop

    To use vue-resource in a module-bundled environment:

    1. Add vue and vue-resource to your package.json.
    2. Run npm install.
    3. Import and register the plugin in your entry point using Vue.use(VueResource).
    var Vue = require('vue');
var VueResource = require('vue-resource');

Vue.use(VueResource);

  9. Handle legacy web server limitations

    develop

    If your web server has limitations regarding request encoding or HTTP methods, use the following options:

    • emulateJSON: Set to true to send requests as application/x-www-form-urlencoded instead of application/json. This is useful if your server cannot handle JSON-encoded requests.
    • emulateHTTP: Set to true to handle RESTful methods like PUT, PATCH, and DELETE on servers that only support standard POST requests. This works by setting the X-HTTP-Method-Override header.

  10. Handle parameters in POST, PUT, and PATCH custom actions

    develop

    When using custom actions with POST, PUT, or PATCH, passing a single object defaults that object to the request body. If you need to set URL parameters (like {/id}) instead of a body, you must pass an empty object {} as the second argument.

    var resource = this.$resource('someItem{/id}', {}, {
  baz: {method: 'POST', url: 'someItem/baz{/id}'}
});

// POST someItem/baz (body is {id: 1})
resource.baz({id: 1}).then(response => {
  // success callback
});

// POST someItem/baz/1 (no body, id is in URL)
resource.baz({id: 1}, {}).then(response => {
  // success callback
});

  11. Use the HTTP service in Vue

    develop

    The HTTP service can be accessed globally via Vue.http or within a Vue instance using this.$http. Request methods return a Promise that resolves to a response object. In all callbacks, the Vue instance is automatically bound to this.

    // Using this.$http in a Vue instance
this.$http.get('/someUrl').then(response => {
  // success callback
}, response => {
  // error callback
});