Shulou(Shulou.com)06/01 Report--

这篇文章主要介绍"Vue前端交互模式与Promise怎么使用"的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇"Vue前端交互模式与Promise怎么使用"文章能帮助大家解决问题。

Promise 概述Promise 是异步编程的一种解决方案，从语法上讲，Promise 是一个对象，从它可以获取异步操作的消息。

优点：

可以避免多层异步调用嵌套问题（回调地狱）

Promise 对象提供了简洁的 API，使得控制异步操作更加容易

Promise基本用法

实例化 Promise 对象，构造函数中传递函数，该函数中用于处理异步任务

resolve 和 reject 两个参数用于处理成功和失败两种情况，并通过 p.then 获取处理结果

var p = new Promise(function(resolve,reject){ //实现异步任务... //成功时调用 resolve(); //失败时调用 reject();});p.then(function(ret){ //从resolve得到正常结果},function(ret){ //从reject得到错误信息});基于 Promise 处理 Ajax 请求

处理原生 Ajax

function queryData(url){ return new Promise(function(resolve,reject){ var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.readyState!=4) return; if(xhr.status == 200){ resolve(xhr.responseText); }else{ reject('出错了'); } } xhr.open('get',url); xhr.send(null); });}//调用queryData('http://localhost:3000/data').then( function (data) { console.log(data); }, function (data) { console.log(data); })

发送多次 ajax 请求(解决回调地狱)

queryData('http://localhost:3000/data') .then(function (data) { console.log(data); //异常情况可以不处理 return queryData('http://localhost:3000/data1'); }) .then(function (data1) { console.log(data1); return queryData('http://localhost:3000/data2'); }) .then(function (data2) { console.log(data2); });then参数中的函数返回值

返回 Promise 实例对象返回的该实例对象会调用下一个 then

返回普通值返回的普通值会直接传递给下一个 then，通过 then 参数中函数的参数接收该值

Promise常用的API1.实例方法* p.then()得到异步任务的正确结果* p.catch()获取异常信息* p.finally()成功与否都会执行（暂时还不是正式标准）foo() .then(function (data) { console.log(data); }) .catch(function (data) { console.log(data); }) .finally(function () { console.log('finish'); })

也可以写为:

foo() .then(function (data) { console.log(data); }, function (data) { console.log(data); }) .finally(function () { console.log('finish'); })2.对象方法

Promise.all() 并发处理多个异步任务，所有任务都执行完成才能得到结果

//p1,p2,p3为Promise实例对象任务Promise.all([p1,p2,p3]).then((result)=>{ console.log(result);})

Promise.race()并发处理多个异步任务，只要有一个任务完成就能得到结果

Promise.race([p1,p2,p3]).then((result)=>{ console.log(result);})关于"Vue前端交互模式与Promise怎么使用"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注行业资讯频道，小编每天都会为大家更新不同的知识点。

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.