VUE04_Promise的概述、常用API、静态方法、axios基于不同请求传参、拦截器、async/await用法(一)

简介: ①. Promise的概述和使用②. Promise常用API(实例方法)③. Promise中的静态方法

①. Promise的概述和使用


  • ①. Promise是异步编程的一种解决方案,从语法上讲,Promise是一个对象,从它可以获取异步操作的消息


  • ②. 好处


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


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


③. 具体使用步骤


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


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


var p = new Promise(function (resolve, reject) {
    setTimeout(() => {
        if (false) {
            resolve('TANGZHI');
        } else {
            reject('ERROR');
        }
    }, 2000);
});
p.then(function (ret) {
    //这是成功调用的结果
    console.log(ret);
},function(ret){
    //这是失败的结果
    console.log(ret);
});


②. Promise常用API(实例方法)


  • ①. .then():得到异步任务正确的结果


  • ②. .catch():获取异常信息


  • ③. .finally():成功与否都会执行(不是正式标准)


 <script>
  //console.dir():可以显示一个对象所有的属性和方法,用来对一个对象进行检查(inspect),并以易于阅读和打印的格式显示。
  //console.dir(Promise);
  //第一种方法
  function po(){
      return new Promise(function(resolve,reject){
         setTimeout(function(){
             //resolve('hello xiaozhi');
             reject('Error');
         },3000);
      });
  }
  //第一种方式
  po()
  //方法成功时会调用这里
  .then(reponse=>{
     console.log(reponse);
  })
  //方法失败时会调用这里
  .catch(reponse=>{
     console.log(reponse);
  })
  //无论方法是否成功,这里都会被调用
  .finally(()=>
     console.log('finished')
   );
  //第二种方式 
  //[第一种方式和第二种方式是等价的]
  po()
  .then(function(ret){
     //这里是成功后的回调
     console.log(ret)
  },function(ret){
     //这里是失败后的回调
     console.log(ret);
  })
  .finally(()=>{
     alert("第二种方式finally...") 
  });
 </script>


③. Promise中的静态方法


①. Promise.all()接受Promise对象组成的数组作为参数,它的返回参数也是数组。当promise的全部为resolve后,它才会进入.then()方法,只要有一个promise为reject,它就会进入.catch()


并发处理多个异步任务,所有任务都执行完成才能得到结果


②. Promise.race()接受的参数与Promise.all()一样,不同的是,它会辨别最快达到resolve或者reject的promise对象,如果这个最快是resolve,则进入.then()方法,如果是reject,则进入.catch()方法。


并发处理多个异步任务,只要有一个任务完成就能得到结果


微信图片_20220108125501.png




相关文章
|
2月前
|
资源调度 JavaScript
|
2月前
|
缓存 JavaScript 搜索推荐
|
29天前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
45 2
|
2月前
|
Python
axios的get请求传入数组参数
【10月更文挑战第11天】 当使用 `axios` 发送包含数组参数的 GET 请求时,默认的序列化方式可能与后端(如 Django)不兼容,导致无法正确获取数组参数。解决方案是通过 `paramsSerializer` 指定自定义序列化函数,或使用 `qs` 库来格式化数组参数,确保前后端一致。示例代码展示了如何使用 `qs` 库设置 `arrayFormat` 为 `&quot;repeat&quot;`,以符合 Django 的解析要求。
39 2
|
2月前
|
JSON JavaScript 前端开发
axios的post请求,数据为什么要用qs处理?什么时候不用?
axios的post请求,数据为什么要用qs处理?什么时候不用?
|
2月前
|
前端开发 JavaScript UED
axios取消请求CancelToken的原理解析及用法示例
axios取消请求CancelToken的原理解析及用法示例
118 0
|
2月前
|
前端开发 JavaScript 开发者
深入理解JavaScript中的Promise:用法与最佳实践
【10月更文挑战第8天】深入理解JavaScript中的Promise:用法与最佳实践
62 0
|
JavaScript
Vue插件之Axios
Vue插件之Axios,环境安装:npm install --save axios vue-axios //安装axios Npm install //安装依赖 在main.
1150 0
|
13天前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
28 1
vue学习第四章

热门文章

最新文章