沈阳企业网站建设/唯尚广告联盟平台

1. useQuery

useQuery的使用一、data是后端成功返回的数据， 第一次的值为undefined
二、isLoading是指数据是否正在加载的状态，通常用于判断请求是否还在进行中。当isLoading为true时，表示数据正在加载中，当isLoading为false时，表示数据加载完成。
三、isFetching是指数据是否正在进行更新的状态，通常用于判断数据是否正在进行更新操作，比如重新加载数据或者刷新数据。当isFetching为true时，表示数据正在进行更新操作，当isFetching为false时，表示数据更新操作完成。
isLoading和isFetching的区别在于，isLoading表示数据是否正在加载中，而isFetching表示数据是否正在进行更新操作。可以说isLoading是isFetching的子集，即当isFetching为true时，isLoading一定为true，但当isLoading为true时，isFetching不一定为true。const {data, isFetching, isLoading} = useQuery({// queryKey的robotList可以认为是这个useQuery的身份识别，必须是唯一的，后面携带的参数是用来控制是否触发查询，如果条件不变则取缓存内的数据而不调用接口queryKey: ['robotList', curPage, pageSize],queryFn: () => ServiceWorkerRegistration.fetchRobotList({curPage: 1, pageSize: 20})
});

2. useMutation

// mutate是用来触发这个方法，isPending是布尔值，true为正在调用中，false表示接口调用完成
const {mutate, isPending} = useMutation({mutationFn: () => services.fetchAddRobot({name: '机器人'}),onSuccess: resp => {// resp为后端返回值},onError: err => {console.err(err);}
})

3. useQueryClient(结合useQuery和useMutation一起使用)

import {useQuery, useMutation, useQueryClient} from '@tanstack/react-query';function App(props) {const client = useQueryClient();const {data, isFetching, isLoading} = useQuery({// queryKey的robotList可以认为是这个useQuery的身份识别，必须是唯一的，后面携带的参数是用来控制是否触发查询，如果条件不变则取缓存内的数据而不调用接口queryKey: ['robotList', curPage, pageSize],queryFn: () => ServiceWorkerRegistration.fetchRobotList({curPage: 1, pageSize: 20})});const {mutate, isPending} = useMutation({mutationFn: () => services.fetchAddRobot({name: '机器人'}),onSuccess: resp => {// resp为后端返回值if (resp.code === 8) {// 创建成功后重新查询client.invalidateQueries({<!-- 上方提到的useQuery的身份识别用途之一就是这里，根据queryKey判断是否触发全部的useQuery，如果存在值就只触发对应的useQuery -->queryKey: ['hello']})}},onError: err => {console.err(err);}})return (<div>展示用法</div>)    
}