promise

promise对象代表的是一个异步的操作,有三种状态:pending(进行中的),fulfilled(已经完成的),rejected(已经失败的)只有异步操作的结果才能决定当前是哪一种状态,其他任何方法都不能改变。(这就是promise(承诺)名字的来源

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div onClick={promiseClick}>开始异步请求</div>

const promiseClick =()=>{
console.log('点击方法被调用')
let p = new Promise(function(resolve, reject){
//做一些异步操作
setTimeout(function(){
console.log('执行完成Promise');
resolve('要返回的数据可以任何数据例如接口返回数据');
}, 2000);
});
return p
}
//其执行过程是:执行了一个异步操作,也就是setTimeout,2秒后,输出“执行完成”,并且调用resolve方法。注意!我只是new了一个对象,并没有调用它,我们传进去的函数就已经执行了,这是需要注意的一个细节。所以我们用Promise的时候一般是包在一个函数中,在需要的时候去运行这个函数,如:

  • 我们包装好的函数最后,会return出Promise对象,也就是说,执行这个函数我们得到了一个Promise对象。接下来就可以用Promise对象上有then、catch方法了,这就是Promise的强大之处了,看下面的代码

  • ```js

    promiseClick().then(function(data){
    console.log(data);
    //后面可以用传过来的数据做些其他操作
    //……
    });

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24

    # async和await函数

    1. await必须写在async函数中,但async函数中可以没有await
    2. 如果await 的promise失败了,就会抛出异常,需要通过try.. . catch捕获异常

    async函数:

    * 返回的不是Promise对象 返回的是一个正确的
    * 是promise对象,返回的对错是返回的promise的对错

    ```js
    let p = new Promise((resolve, reject) = > {
    reject('Error')
    })
    1. let res = await p;
    2.右侧为其它类型的数据
    let res2 = await 20;
    3.如果是promise是失败的状态
    try{
    let res3 = await p;
    }catche(e){
    console.log(e);
    }

async和await结合

1
2
3
4
5
6
7
8
async function main(){
try{
let data1 = await mineReadFile(./resource/1x.html);
let data2 = await mineReadFile(./resource/2.html);
}catch(e){
}
}
main

懒加载

懒加载,即延迟加载(Lazyload)。简单来说就是一个长页面中需要展示很多图像的时候,如果在进入页面的时候一次性把所有图片加载完,需要很长的时间。为了提升用户体验,我们使用懒加载,当图片出现在浏览器可视区域时,才加载图片。例如各种电商页面。-

跨域问题(前后端分离)

localhost:8080前端 后端 5000

四种方法发送请求

image-20230421104014908

代理服务器和 前端自己的服务器一样1