CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-vue-resource

The HTTP client for Vue.js providing services for making web requests and handling responses using XMLHttpRequest or JSONP

Pending
Overview
Eval results
Files

promise-service.mddocs/

Promise Service

Vue context-aware Promise wrapper that automatically binds callback functions to the appropriate Vue component context, ensuring proper this binding in async operations.

Capabilities

Promise Creation

Create context-aware promises that maintain proper Vue component binding.

/**
 * Create a Vue context-aware promise
 * @param executor - Promise executor function or existing Promise
 * @returns PromiseObj with Vue context binding
 */
function $promise(executor: (resolve: Function, reject: Function) => void): PromiseObj;

/**
 * Static Promise constructor (on Vue.Promise)
 * @param executor - Promise executor function or existing Promise  
 * @param context - Vue component context for binding
 * @returns PromiseObj with specified context binding
 */
function Promise(executor: Function | Promise, context?: any): PromiseObj;

Usage Examples:

// Instance method (automatically binds to component context)
export default {
  methods: {
    async fetchUserData() {
      return this.$promise((resolve, reject) => {
        setTimeout(() => {
          resolve({ name: 'John', id: 1 });
        }, 1000);
      }).then(function(userData) {
        // 'this' is automatically bound to the Vue component
        this.user = userData;
        console.log('User loaded:', this.user.name);
      });
    }
  }
}

// Static method with explicit context
const promise = Vue.Promise((resolve, reject) => {
  resolve('Hello');
}, this);

Static Promise Methods

Utility methods for creating promises from iterables and values.

/**
 * Create a promise that resolves when all promises in iterable resolve
 * @param iterable - Array of promises or values
 * @param context - Vue component context for binding
 * @returns PromiseObj that resolves with array of results
 */
function Promise.all(iterable: any[], context?: any): PromiseObj;

/**
 * Create a promise that resolves with the given value
 * @param value - Value to resolve with
 * @param context - Vue component context for binding  
 * @returns PromiseObj that resolves with value
 */
function Promise.resolve(value: any, context?: any): PromiseObj;

/**
 * Create a promise that rejects with the given reason
 * @param reason - Reason for rejection
 * @param context - Vue component context for binding
 * @returns PromiseObj that rejects with reason
 */
function Promise.reject(reason: any, context?: any): PromiseObj;

/**
 * Create a promise that resolves/rejects with the first settled promise
 * @param iterable - Array of promises or values
 * @param context - Vue component context for binding
 * @returns PromiseObj that settles with first result
 */
function Promise.race(iterable: any[], context?: any): PromiseObj;

Usage Examples:

// Promise.all with context binding
Vue.Promise.all([
  this.$http.get('/api/users'),
  this.$http.get('/api/posts'),
  this.$http.get('/api/comments')
], this).then(function([users, posts, comments]) {
  // 'this' refers to the Vue component
  this.users = users.body;
  this.posts = posts.body;
  this.comments = comments.body;
});

// Promise.resolve with immediate value
Vue.Promise.resolve({ message: 'Success' }, this)
  .then(function(result) {
    this.status = result.message;
  });

// Promise.race for timeout functionality
Vue.Promise.race([
  this.$http.get('/api/slow-endpoint'),
  Vue.Promise.reject('Timeout after 5s', this)
], this).catch(function(error) {
  this.error = error;
});

Promise Instance Methods

Methods available on PromiseObj instances for chaining and context management.

/**
 * Set or change the context binding for this promise
 * @param context - Vue component or object to bind callbacks to
 * @returns Same PromiseObj instance for chaining
 */
bind(context: any): PromiseObj;

/**
 * Add fulfillment and rejection handlers with automatic context binding
 * @param fulfilled - Success callback (will be bound to context)
 * @param rejected - Error callback (will be bound to context)
 * @returns New PromiseObj for chaining
 */
then(fulfilled?: (value: any) => any, rejected?: (reason: any) => any): PromiseObj;

/**
 * Add rejection handler with automatic context binding
 * @param rejected - Error callback (will be bound to context)
 * @returns New PromiseObj for chaining
 */
catch(rejected: (reason: any) => any): PromiseObj;

/**
 * Add a callback that runs regardless of promise outcome
 * @param callback - Callback to run after promise settles
 * @returns New PromiseObj for chaining
 */
finally(callback: () => void): PromiseObj;

Usage Examples:

// Context rebinding
const promise = Vue.Promise.resolve('Hello');
promise.bind(this).then(function(value) {
  // 'this' now refers to the bound context
  this.message = value;
});

// Chaining with automatic context binding
this.$promise((resolve) => {
  setTimeout(() => resolve('Delayed result'), 1000);
})
.then(function(result) {
  this.result = result;
  return this.$http.post('/api/log', {message: result});
})
.then(function(response) {
  this.logged = true;
})
.catch(function(error) {
  this.error = error.message;
})
.finally(function() {
  this.loading = false;
});

Context Binding Behavior

The Promise service automatically binds callback functions to the appropriate Vue component context.

Usage Examples:

export default {
  data() {
    return {
      users: [],
      loading: false,
      error: null
    };
  },
  
  methods: {
    loadUsers() {
      this.loading = true;
      
      // Without Vue.Promise - 'this' binding is lost
      new Promise((resolve) => {
        setTimeout(() => resolve(['John', 'Jane']), 1000);
      }).then(function(users) {
        // 'this' is undefined or wrong context!
        this.users = users; // Error!
      });
      
      // With Vue.Promise - 'this' is automatically bound
      this.$promise((resolve) => {
        setTimeout(() => resolve(['John', 'Jane']), 1000);
      }).then(function(users) {
        // 'this' correctly refers to the Vue component
        this.users = users;
        this.loading = false;
      }).catch(function(error) {
        this.error = error;
        this.loading = false;
      });
    }
  }
}

Types

interface PromiseObj {
  /** Underlying native Promise instance */
  promise: Promise<any>;
  /** Vue component context for callback binding */
  context: any;
  
  /** Bind callbacks to specified context */
  bind(context: any): PromiseObj;
  /** Add success/error handlers with context binding */
  then(fulfilled?: Function, rejected?: Function): PromiseObj;
  /** Add error handler with context binding */
  catch(rejected: Function): PromiseObj;
  /** Add cleanup handler that runs regardless of outcome */
  finally(callback: Function): PromiseObj;
}

interface PromiseConstructor {
  /** Create context-aware promise from all promises in iterable */
  all(iterable: any[], context?: any): PromiseObj;
  /** Create context-aware promise that resolves with value */
  resolve(value: any, context?: any): PromiseObj;
  /** Create context-aware promise that rejects with reason */
  reject(reason: any, context?: any): PromiseObj;
  /** Create context-aware promise that races promises in iterable */
  race(iterable: any[], context?: any): PromiseObj;
}

Install with Tessl CLI

npx tessl i tessl/npm-vue-resource

docs

http-client.md

index.md

interceptors.md

promise-service.md

resources.md

url-processing.md

tile.json