Promise实例简单使用与理解

       Promise的案例

        我们直接上案例然后通过案例去解释理解。我们的代码模拟的是去前端访问服务器获取数据然后渲染到页面上，服务器模拟的也是去访问其他地址获取数据然后返还给前端。

import React from 'react'
import Header from './components/Header'
import { useEffect, useState } from 'react'
import { useRoutes } from 'react-router-dom'
import routes from './routes/routes'
import axios from 'axios'
export default function App() {
    const element = useRoutes(routes)
    console.log('element', element)
    const [text, setText] = useState({})
    useEffect(() => {
        axios.get('http://localhost:3000/person').then(
            (response) => {
                console.log(' ', response)
                setText(response.data)
            }
        )
    }, [])

    return (
        <>
            <Header />
            {element}
            <h1>{text.name} --- {text.age}</h1>

        </>
    )
}

        页面加载完之后，发送一个Get请求到http://lcoalhost:3000/persom，这里axios返回的也是一个promise实例，所以可以.then（）来拿到结果，结果拿到之后，去对结果进行操作，这里用setText把数据保存到react状态中，渲染到页面上。

const http = require("node:http"); //从 node 中引入 http 模块
// const { Agent } = require("undici-types");

//1. 你的电脑准备启动一个 http 服务，为其他同样使用 http 的应用（如：浏览器）准备提供服务
const server = http.createServer((req, res) => {
  const p = new Promise((resolve, reject) => {
    if (req.url === '/person') {
      //发送异步请求有结果了
      setTimeout(() => {
        resolve({ name: '李晨阳', age: 21 })

      }, 5000)
    } else if (req.url === "/") {
      resolve('index.html')
    } else if (req.url === '/index.css') {
      resolve('index.css')
    } else {
      reject('404 NOT Found')
    }
  })
  p.then((result) => {
    res.writeHead(200, { 'Content-Type': 'application/json;charset=utf-8' })
    res.end(JSON.stringify(result))
  }
  ).catch((error) => {
    // res.writeHead(404, { 'Content-Type': 'text/plain;charset=utf-8' })
    res.end(error)
  })
})

             这个后端的逻辑是启动本地的http服务器，当浏览器或者前端访问/person路径的时候，这里的定时器模拟延迟假装去其他的地址获取数据或者数据库，然后拿回来数据之后用resolve()

返回成功的数据name和age对象。如果访问的是没有判断逻辑的路径就返回报错。

        这就是我现在使用promise实例的简单例子，Promise是一个异步任务的包裹器。用来描述异步操作结果的状态，new Promise（）传入一个函数，这个函数会立即执行。接收两个参数 resolve（）reject（）表示任务成功或者失败并把结果或者错误传出去。任务成功了就会执行then方法，错误就会被catch捕捉。

        这里后端的流程是浏览器访问http://localhost:8989/person 然后req.url === /person成立进入到new Promise(),模拟延迟五秒后执行resolve（） Promise 状态从pending-》fulfilled .then被触发然后数据res.end发回前端。

        前端的流程 axios.get（）也是基于promise的封装，请求发出等待响应，服务器返回res.end数据之后 axios.get状态变为fulfiller，然后.then执行拿到response.data,然后执行体去操作数据更新到react状态里面，然后页面展示。

        这种抽象的过程还是倾向于去写具体某个功能的时候，去使用，在用的时候去发现错误，去纠错的时候理解。说白了菜就多练。