项目中遇到的异步

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了项目中遇到的异步相关的知识,希望对你有一定的参考价值。

参考技术A 我们在做项目的时候会遇到很多异步操作,但是不知道它们什么时候开始执行、它们执行的顺序以及使用场景,比如$nextTick、document.ready、window.onload,下面我们就一一开始讲解

页面加载完成有两种事件,一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件),而是onload,表示页面包含图片等文件在内的所有元素都加载完成。

Dom更新循环结束之后执行延迟回调,在修改数据之后立即使用这个方法,获取更新后的Dom,通过setTimeout(fn, 0)也可以同样获取到。

在created、mounted阶段如果需要操作渲染后的视图,也要使用nextTick方法。
⚠️注意:官方文档说明:注意mounted不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以用vm.$nextTick替换掉mounted。

总结:settimeout、接口、异步都会有不同的线程控制,它们互不影响,所以它们也不会互相堵塞,但是有的线程是互斥的,比如js线程和GUI线程是互斥的

React -配置文件中需要使用组件中异步请求到的数据

最近遇到了一个需求
先简单介绍下项目:该项目有一个父类组件,该组件用于提供页面所需的公共数据及内容,后续所有的组件都需要继承该组件获得公共的数据。
现在遇到的问题是:我需要在某个组件中引入一个js配置文件,并且该配置文件中的数据又必须来子组件,因为该数据从父类组件中继承下来。
那么思路是这样的:首先我们将配置文件写成导出一个方法,并且该方法返回配置数据的形式,然后在组件文件中引入该配置文件,然后在state中定义一个状态存储配置文件返回的数据(也就是调用配置文件导出的方法,并且将配置文件需要的值传递进去)

组件代码

import React,  Component  from "react";
import  babel  from "./configOption";//引入配置文件
// 这部分原本应该是在继承组件componentDidMount生命周期中通过请求接口获取相应数据
// 这里为了方便,我直接使用变量定义一些数据
const data = 
  female: "女",
  male: "男",
;

export default class App extends Component 
  state = 
    sex: "",
    source: babel(data),//将配置问价需要的参数传递进去,并且将配置好的对象返回,在页面中使用
  ;
  componentDidMount() 
  render() 
    const options = this.state.source.sexList.map((it,i) => <option value=it.value key=i>it.label</option>)
    return (
      <div>
        <select name="" id="">
          options
        </select>
      </div>
    );
  


配置文件configOption.js代码

//将需要的数据对象传入
export const babel = (location) => (
  sexList: [
     label: location.male, value: "male" ,
     label: location.female, value: "female" ,
  ],
);

以上是关于项目中遇到的异步的主要内容,如果未能解决你的问题,请参考以下文章

删除项目 mongodb 和节点异步

最近项目中遇到了一个场景,其实很常见,就是定时获取接口刷新数据。那么问题来了,假设我设置的定时时间为1s,而数据接口返回大于1s,应该用同步阻塞还是异步?

JS中事件的执行顺序和AJAX的异步

Node + Sequelize:如何在添加之前检查项目是不是存在? (异步混淆)

使用 vue-pdf 遇到的问题

在 Promise 中将项目添加到数组时遇到问题