The HTTP client for Vue.js providing services for making web requests and handling responses using XMLHttpRequest or JSONP
—
Vue context-aware Promise wrapper that automatically binds callback functions to the appropriate Vue component context, ensuring proper this binding in async operations.
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);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;
});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;
});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;
});
}
}
}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