promise 的基本用法在 vue 中，我们通常通过 ajax 请求获取服务器数据，而 ajax 是异步操作，因此需要使用 promise 对其进行封装。常见的 promise 用法如下：
let promise = new promise((resolve, reject) => { // 异步操作 settimeout(() => { // 模拟异步操作结束 let result = 'this is data requested from server.'; // 将数据传递给 then 方法 resolve(result); }, 1000);});promise.then(data => { console.log(data);}).catch(error => { console.log(error);});
上述代码中，我们首先创建了一个 promise 对象，promise 构造器接收一个函数作为参数，该函数包含两个参数 resolve 和 reject，分别代表异步操作成功和失败的回调函数。在异步操作结束之后，我们通过调用 resolve 函数将数据传递给 then 方法中的回调函数。如果在异步操作过程中出现错误，我们可以通过 reject 函数将错误信息传递给 catch 方法中的回调函数。
手写 promise 实现异步操作在 vue 中，我们经常需要封装某些工具方法或 vue 实例方法，并将其暴露给全局使用。因此，手写 promise 成为了一个必备的技能。下面我们将演示如何使用 javascript 手写 promise 实现异步操作。
首先，我们需要定义一个用于封装异步操作的函数，并传入两个参数 resolve 和 reject，用来控制异步操作的成功或失败回调函数。代码如下：
function mypromise(fn) { let self = this; self.value = null; self.error = null; self.onfulfilled = null; self.onrejected = null; function resolve(value) { self.value = value; self.onfulfilled(self.value); } function reject(error) { self.error = error; self.onrejected(self.error); } fn(resolve, reject);}
在上述代码中，我们定义了 mypromise 函数，并初始化了一些变量，如 value 和 error。在函数中，我们定义了两个回调函数 resolve 和 reject，并通过传入的参数 fn 调用了它们。resolve 回调函数接收一个值 value，用于在异步操作成功后传递数据给 then 方法。reject 回调函数接收一个错误信息 error，用于在异步操作失败后传递错误信息给 catch 方法。
接下来，我们需要实现 then 方法，用于处理异步操作成功后的回调函数。代码如下：
mypromise.prototype.then = function(onfulfilled, onrejected) { let self = this; self.onfulfilled = onfulfilled; self.onrejected = onrejected;};
在上述代码中，我们在 mypromise 原型上实现了 then 方法，并传入两个回调函数 onfulfilled 和 onrejected 作为参数。在方法中，我们将这两个回调函数存储在 self 对象中，在异步操作成功后调用 onfulfilled 函数，将数据传递给 then 方法中的回调函数。在异步操作失败后，调用 onrejected 函数，将错误信息传递给 catch 方法。
最后，我们需要实现 catch 方法，用于处理异步操作失败后的回调函数。代码如下：
mypromise.prototype.catch = function(onrejected) { let self = this; self.onrejected = onrejected;};
在上述代码中，我们在 mypromise 原型上实现了 catch 方法，并传入 onrejected 回调函数作为参数。在方法中，我们将 onrejected 函数存储在 self 对象中，在异步操作失败后将错误信息传递给 onrejected 回调函数。
综合应用接下来，我们将基于 vue，结合 mypromise 实现异步操作。在一个 vue 实例中，我们定义了一个异步方法 fetchdata，用于请求服务器数据。在 fetchdata 方法中，我们手写了一个 promise 对象用于请求数据，然后将数据存储在 data 属性中。
new vue({ el: '#app', data: { data: null, error: null }, methods: { fetchdata: function() { let self = this; return new mypromise(function(resolve, reject) { let xhr = new xmlhttprequest(); xhr.open('get', '/api/data', true); xhr.onreadystatechange = function() { if(xhr.readystate === 4) { if(xhr.status === 200) { resolve(json.parse(xhr.responsetext)); } else { reject(xhr.statustext); } } }; xhr.onerror = function() { reject(xhr.statustext); }; xhr.send(); }); } }, mounted: function() { let self = this; self.fetchdata().then(function(data) { self.data = data; }).catch(function(error) { self.error = error; }); }});
在上述代码中，我们首先定义了一个 vue 实例，然后在 data 属性中初始化了用于存储数据和错误信息的变量。在 fetchdata 方法中，我们手写了一个 promise 对象，创建了一个 ajax 请求对象，并将数据请求成功和失败的回调函数分别传递给 resolve 和 reject 函数。在执行异步操作成功后，我们获取了从服务器中返回的数据，并存储在 data 属性中。在执行异步操作失败后，我们获取了错误信息，并存储在 error 属性中。在 mounted 钩子函数中，我们通过调用 fetchdata 方法获取服务器数据，并通过 then 和 catch 方法分别处理异步操作成功和失败的情况。在异步操作成功后，我们获取了从服务器中返回的数据，并将其赋值给全局变量 self.data。在异步操作失败后，我们获取了错误信息，并将其存储在全局变量 self.error 中。
通过手写 promise，我们可以更好地了解 promise 的原理和使用方法，并可以封装自己的工具方法或 vue 实例方法。在实际开发中，我们应该根据具体的需求和业务场景，选择适合的异步处理方式，提升项目的开发效率和用户体验。
以上就是vue中如何使用手写promise手写实现异步操作的详细内容。