Promise解析

是阿楞啊

已于 2024-01-31 14:30:23 修改

阅读量550

点赞数 9

文章标签： javascript 开发语言 ecmascript

于 2023-12-28 16:16:04 首次发布

本文链接：https://blog.csdn.net/m0_56516186/article/details/135270696

版权

一、文字描述promise

理解1：Promise是一种异步编程的解决方案，它可以让我们更加方便的处理异步操作，避免回调炼狱的问题（callback hell）。有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。

理解2：New一个Promise可以理解为创建了一个异步容器或者创建了一个异步对象（因为是为了解决异步问题为了更形象的理解所以称它为异步对象），里面保存着某个未来才会结束的事件的结果。

理解3：Promise保存的事件结果有三种状态pending、fulfilled（resolved）、rejected,只有异步操作的结果能决定当前是哪一种状态。

二、基本用法

// promise的resolve, reject两种状态

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = true; // 模拟异步操作成功或失败的条件
      if (success) {
        const data = 'Data fetched successfully';
        resolve(data); // 操作成功，调用resolve函数并传递操作的结果
      } else {
        const error = 'Error occurred while fetching data';
        reject(error); // 操作失败，调用reject函数并传递错误信息
      }
    }, 2000);
  });
}

fetchData()
  .then((data) => {
    console.log(data); // 异步操作成功，打印操作的结果
  })
  .catch((error) => {
    console.log(error); // 异步操作失败，打印错误信息
  });

// promise新建后就会立即执行

let promise = new Promise(function(resolve, reject) {
  console.log('Promise');
  resolve();
});

promise.then(function() {
  console.log('resolved.');
});

console.log('Hi!');

// Promise
// Hi!
// resolved

// 异步加载图片的示例

function loadImageAsync(url) {
  return new Promise(function(resolve, reject) {
    const image = new Image();

    image.onload = function() {
      resolve(image);
    };

    image.onerror = function() {
      reject(new Error('Could not load image at ' + url));
    };

    image.src = url;
  });
}

三、promise 面试题

const promise = new Promise((resolve, reject) => {
  console.log(1)
  resolve()
  console.log(2)
})

promise.then(() => {
  console.log(3)
})

console.log(4)

// 执行结果是：1243
// promise构造函数是同步执行的，then方法是异步执行的

const promise = new Promise((resolve, reject) => {
  console.log(1);
  resolve(5);
  console.log(2);
}).then(val => {
  console.log(val);
});

promise.then(() => {
  console.log(3);
});

console.log(4);

setTimeout(function() {
  console.log(6);
});


// 执行结果: 124536
// Promise new的时候会立即执行里面的代码 then是微任务 会在本次任务执行完的时候执行 setTimeout是宏 任务 会在下次任务执行的时候执行

四、Axios

Axios是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

它具有以下特点：

支持浏览器和 node.js 环境。

支持请求和响应拦截器，可以在请求或响应被处理前或后执行一些操作。

支持取消请求。

自动转换 JSON 数据。

提供了一种简洁的方式来处理错误。

支持并发请求。

提供了一种简洁的方式来设置请求的配置，如 headers、params 等。

客户端支持防御 XSRF

Axios 的使用非常简单，可以通过 npm 安装，然后在代码中引入并使用。它提供了丰富的 API，可以满足各种 HTTP 请求的需求。因此，它在前端开发和后端开发中都有着广泛的应用。
// 从浏览器中创建 XMLHttpRequests来发送 HTTP 请求
// 创建一个新的 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();

// 配置请求
// 请求的方法、URL 、是否异步
xhr.open('GET', 'https://api.example.com/data', true);

// 设置响应类型
xhr.responseType = 'json';

// 监听请求状态变化
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      // 请求成功
      console.log(xhr.response);
    } else {
      // 请求失败
      console.log('请求失败');
    }
  }
};

// 发送请求
xhr.send();
// Axios支持 Promise API
axios.get('/api/data')
  .then(function (response) {
    // 处理成功的响应
    console.log(response.data);
  })
  .catch(function (error) {
    // 处理请求失败
    console.log(error);
  });

Axios客户端支持防御 XSR（Cross-Site Request）的理解：

1、客户端支持防御 XSR（Cross-Site Request）通常指的是客户端（通常是Web浏览器）具有内置的安全机制，可以防止跨站点请求伪造（Cross-Site Request Forgery，CSRF）攻击。

2、CSRF攻击是一种利用用户在已登录的情况下，通过伪装请求来执行未经授权的操作的攻击方式。攻击者可以通过诱使用户访问恶意网站或点击恶意链接，来发送伪造的请求，以执行一些敏感操作，比如更改密码、转账等。

可以防止或减轻CSRF攻击的影响的安全机制有：、

同源策略（Same-Origin Policy）：浏览器会限制来自不同源（域名、协议、端口）的网页对当前网页的访问，从而防止跨站点请求伪造攻击。

CSRF Token：网站会在用户登录时生成一个CSRF令牌，并将其嵌入到表单或请求中。当提交表单或请求时，服务器会验证这个令牌，以确保请求是合法的。

Referer检查：服务器会检查请求的Referer头部，以确保请求来自合法的来源。

客户端支持防御XSR意味着浏览器或客户端应用程序内置了这些安全机制，可以帮助防止CSRF攻击。这些安全机制可以有效地保护用户免受CSRF攻击的影响，从而提高Web应用程序的安全性。