promise简单的封装以及export和export default 的区别

promise 同时被 2 个专栏收录
1 篇文章 0 订阅
3 篇文章 0 订阅

简单的promise封装

封装promise时首先我们需要了解promise是什么?

1、主要用于异步计算。
2、可以将异步操作队列化,按照期望的顺序执行,返回符合预期的结果。
3、可以在对象之间传递和操作promise,帮助我们处理队列。

promise 封装
const promise = new Promise(function(resolve, reject) {
  if (/* 异步操作成功 */){
    resolve(value)
  } else {
    reject(error)
  }
})

这样可以实现简单的promise封装,其中resole()为成功是的回调而reject()为失败时的回调。

promise封装AJAX

首先我们需要知道什么是ajax?

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

JQ AJAX封装

jquery其实已经对ajax进行了一次封装代码如下:

$.ajax({
url:"服务器",//地址
data:{"key":所传数据},//传输的数据(键值对方式)
type:"post",//传输的类型
dataType:"json",//数据格式
success:function(aaa){
//aaa为服务器所返回的值
},
error:function(){
//服务器连接失败
},
beforeSend:function(){//在success之前就进行了
//操作
},
complete:function(){//在success之后就进行
//操作
}
});

了解了AJAX的封装,我们接下来用promise对AJAX进行简单的封装。

index.js

export const New_promise = (param) => {
    return new Promise((resolve, reject)=>{
       $.ajax({
           ...param,
           success: function (res) {
               //请求成功时处理
               resolve(res)
            },
           error: function (err) {
               //请求出错处理
               reject(err)
           }
       });
    })
 }

这边我们利用ES6解构赋值的方法来对param进行结构,如果不了解什么是结构复制可以去看下ES6教程
使用 在index.html页面中代码如下:

index.html

 <script type="module">
        import {New_promise } from './js/index.js'; 
        New_promise({url:'在此处放入请求的地址'}).then(result=>{console.log(result);}
 </script>

这里我们呢默认是get请求。

接下来我们需要了解的是export 以及 export default 的区别

export 可以是多个 而export default 是一个。

我们来看一下:

 import {a} from './js/index.js';
 import New_promise from './js/index.js';
export {a}
export default New_promise
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值