Promise网络异步请求

Promise异步编程

概述

是异步编程的一种解决方案。

从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。

状态

Promise 异步操作有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。除了异步操作的结果，任何其他操作都无法改变这个状态。

使用场景

Promise是异步编程的一种解决方案。
那什么时候我们会来处理异步事件呢？

这种方案在网络请求中很常见
一种很常见的场景应该就是网络请求了。通常在这种场景中，因为不能立即拿到结果，所以往往我们会传入另外一个函数，在数据请求成功时，将数据通过传入的函数回调出去。
如果只是一个简单的网络请求，那么这种方案不会给我们带来很大的麻烦。

基本语法

const p1 = new Promise(function(resolve,reject){

resolve(‘success1’);

resolve(‘success2’); });

const p2 = new Promise(function(resolve,reject){

resolve(‘success3’);

reject(‘reject’); });

p1.then(function(value){ console.log(value); // success1 });

p2.then(function(value){ console.log(value); // success3 });

原始的异步请求思路

// setTimeout(()=>{
// console.log(“first”);
// setTimeout(()=>{
// console.log(“second”);
// setTimeout(() => {
// console.log(“third”);
// }, 1000);
// },1000)
// },1000)

基于promise的异步请求思路

// new Promise((resolve,reject)=>{
// setTimeout(()=>{
// resolve(“first”);
// resolve()
// },1000)
// }).then((res)=>{
// console.log(res);
// new Promise((resolve,reject)=>{
// setTimeout(()=>{
// resolve(“second”);
// },1000)
// }).then((res)=>{
// console.log(res)
// new Promise((resolve,reject)=>{
// setTimeout(()=>{
// resolve(“third”);
// },1000)
// }).then((res)=>{
// console.log(res);
// })
// })
// })

网络请求中的基于axios和promise的封装

接口
// 导入必要的模块
const express = require(‘express’);
const app = express();

// 定义路由
app.get(‘/api/data1’, (req, res) => {
// 在这里处理GET请求逻辑，例如从数据库获取数据
// const data = [/* 从数据库或其他数据源获取数据 */];
let data={
code:‘200’,
student:{name:‘zhan san’,age:12,address:“gz”}
}

// 发送响应
res.json(data);
});

// 定义路由
app.get(‘/api/data2’, (req, res) => {
// 在这里处理GET请求逻辑，例如从数据库获取数据
// const data = [/* 从数据库或其他数据源获取数据 */];
let data={
code:‘200’,
student:{name:“li si”,age:21,address:“sz”}
}

// 发送响应
res.json(data);
});

// 启动服务器
app.listen(3000, () => {
console.log(‘Server started on port 3000’);
});

axios和promise封装一次，发送多个请求的方式

方式一，基于promise.all(),*这里的所有请求都成功才可以，否则执行catch里面的内容

// 封装一个发送请求的方法
function fetchData(url) {
return new Promise((resolve, reject) => {
axios.get(url)
.then(response => {
resolve(response.data);
})
.catch(error => {
reject(error);
});
});
}

function send(urls) {
Promise.all(urls.map(url =>
fetchData(url))
)
.then(data => {
// 处理成功获取到的数据 ,加入处理函数
console.log(data)
})
.catch(error => {
// 处理请求失败的情况
console.error(‘请求失败:’, error);
});
}

// 调用方法发送d请求获取多个数据
send([
“http://localhost:3000/api/data1”,
“http://localhost:3000/api/data2”
])

方式二，基于对象封装请求参数，try catch进行异常处理

const axios = require(‘axios’);
//基于对象分装请求参数
const requests = [
{ url: ‘http://localhost:3000/api/data1’, method: ‘get’ },
{ url: ‘http://localhost:3000/api/data3’, method: ‘get’ },

];

async function send(requests) {
for (let request of requests) {
try {
const response = await axios(request);
console.log(response.data);
} catch (error) {
console.error(Error occurred while making request to ${request.url}: ${error});
}
}
}

send(requests);