前端遇到的问题及思考

Dalio66

已于 2024-01-07 18:53:43 修改

阅读量420

点赞数 13

文章标签：前端 ajax

于 2024-01-05 21:26:37 首次发布

本文链接：https://blog.csdn.net/weixin_42068652/article/details/134041654

版权

前端遇到的问题及思考

我在写前端代码时遇到的一些问题
- JS和Axios阶段

我在写前端代码时遇到的一些问题

这是记录我在写代码时遇到的一些问题，这里包含了大大小小的问题及思考。每天记录，开卷有益。也欢迎各位大佬讨论指正我的理解和逻辑。

JS和Axios阶段

1 +=和map的一点思考

 //map进行渲染
    const htmlStr = result.data.data.map((item, index) => {
     //这里的map遍历映射需要获取到已有数据进行遍历，每遍历一遍就把原来的存储下来，因此可以理解成是在已有的数据下进行一种映射（有实物才会有影子）
      return `<tr>
      <td>${index + 1}</td>
      <td>${item.bookname}</td>
      <td>${item.author}</td>
      <td>${item.publisher}</td>
      <td>
        <span class="del">删除</span>
        <span class="edit">编辑</span>
      </td>
    </tr>`
    }).join('')
    console.log(htmlStr)
    document.querySelector('.list').innerHTML = htmlStr

//+=的思考在这里是把每新渲染的数据进行了保留，一直保留在页面中，在最开始没有写+导致输入框没输入一个自动覆盖了之前的。
chatUl.innerHTML += `
        <li class="left">
          <img src="./assets/you.png" alt="">
          <span>${result.data.data.info.text}</span>
        </li>
      `

2 Ajax的原理

1.创建 XMLHttpRequest 对象
2. 配置请求方法和请求 url 地址
3. 监听 loadend 事件，接收响应结果
4. 发起请求

const xhr = new XMLHttpRequest()
xhr.open('POST(orGET)','url网址')
xhr.addEventListener('loadend',()=>{
	console.log(xhr.response)
})
xhr.send()

3 Promise

<script>
    //先创建Promise对象，有两个参数resolve和reject,三种状态：pending，fulfilled，reject
    const p = new Promise((resolve, reject) => {
      //一旦创建Promise对象就会执行pending待执行状态
      //执行异步代码
      setTimeout(() => {
        //resolve执行成功就会显示fulfilled状态已兑现，执行then函数
        resolve('模拟成功的结构')
        // reject()=>'reject'状态已拒绝，执行mycatch
        // reject(new Error('shibai'))
      }, 1000)
    })
    console.log(p);
    //获取结果
    p.then(result => {
      console.log(result)
    }).catch(error => {
      console.log(error)
    })
  </script>

手写Promise

<body>
  <p class="my-p"></p>
  <script>
    /**
     *  1. 创建Promise对象
     *  2. 执行XHR异步代码，获取省份列表
     *  3. 关联成功或失败函数，做后续处理
    */
   	  const p = new Promise((resolve, reject) => {
      const xhr = new XMLHttpRequest()
      xhr.open('GET', 'url')//这里url没有写接口
      xhr.addEventListener('loadend', () => {
        //如何判断响应成功失败？
        //2xx开头都是成功的响应状态码
        //如果成功调用resolve函数
        //在这里将Pronise和XHR联系在一起
        if (xhr.status >= 200 && xhr.status < 300) {
          resolve(JSON.parse(xhr.response))
        } else {
          reject(new Error(xhr.response))
        }
        console.log(xhr.response)
      })
      xhr.send()
    })
    //接受成功或者失败
    p.then(result => {
      console.log(result)
      document.querySelector('.my-p').innerHTML = result.list.join('<br>')
    }).catch(error => {
      console.log(error)
      document.querySelector('.my-p').innerHTML = error.message
    })
  </script>
</body>