React-24:React中使用fetch发送请求的两种方式

简介: React-24:React中使用fetch发送请求的两种方式

方式1:使用promise的方式

fetch(`http://localhost:3000/api1/search/users2?q=${this.input1.value}`).then(
            response => {
                console.log('成功联系到服务器');
                return response.json();
            },
        ).then(
            response => {
                console.log("成功获取到数据", response);
            },
        ).catch(
            error => {
                console.log("请求出错",error);
            }
        )

方式2:使用await async

try {
            const response = await fetch(`http://localhost:3000/api1/search/users2?q=${this.input1.value}`);
            const data = await response.json();
            PubSub.publish('Item', { isLoading: false, isFirst: false,users: data.items });
            console.log(data);
        } catch (error) {
            PubSub.publish('Item', { isLoading:false,err:error.message });
        }

别忘了在函数的开头加上async

image.png

相关文章
|
3月前
|
前端开发 JavaScript UED
react或者vue更改用户所属组,将页面所有数据进行替换(解决问题思路)____一个按钮使得页面所有接口重新请求
在React或Vue中,若需在更改用户所属组后更新页面所有数据但不刷新整个页面,可以通过改变路由出口的key值来实现。在用户切换组成功后,更新key值,这会触发React或Vue重新渲染路由出口下的所有组件,从而请求新的数据。这种方法避免了使用`window.location.reload()`导致的页面闪烁,提供了更流畅的用户体验。
60 1
react或者vue更改用户所属组,将页面所有数据进行替换(解决问题思路)____一个按钮使得页面所有接口重新请求
|
3月前
|
前端开发
React技术栈-react使用的Ajax请求库实战案例
这篇文章介绍了在React应用中使用Axios和Fetch库进行Ajax请求的实战案例,展示了如何通过这些库发送GET和POST请求,并处理响应和错误。
63 10
|
3月前
|
前端开发
React技术栈-react使用的Ajax请求库用户搜索案例
这篇文章展示了一个React技术栈中使用Ajax请求库(如axios)进行用户搜索的实战案例,包括React组件的结构、状态管理以及如何通过Ajax请求获取并展示GitHub用户数据。
37 7
React技术栈-react使用的Ajax请求库用户搜索案例
|
6月前
|
存储 缓存 前端开发
react怎么只让接口请求一次
react怎么只让接口请求一次
115 0
|
3月前
|
前端开发
React页面跳转取消上一个页面的所有请求
React页面跳转时取消上一个页面的所有axios请求,通过axios拦截器设置cancelToken,并在页面跳转时调用cancel函数取消未完成的请求。
59 2
|
3月前
|
前端开发 JavaScript
React配合axios请求拦截校验session,403跳转至登陆页面
React中使用axios进行请求拦截,通过自定义事件监听和响应拦截实现403状态码时的自动登录页面跳转。
110 2
|
7月前
|
缓存 前端开发 JavaScript
React和Next.js开发常见的HTTP请求方法
React和Next.js开发常见的HTTP请求方法
138 0
|
7月前
|
前端开发
React umi框架局部请求拦截器
React umi框架局部请求拦截器
116 0
|
缓存 前端开发 JavaScript
React-Query:解锁你的应用程序潜力,轻松解决接口请求难题!
许多状态管理库,比如`redux`,可以很流畅的管理页面的状态,也有处理副作用的能力,但往往不能很好的处理服务端的状态。
145 1
React-Query:解锁你的应用程序潜力,轻松解决接口请求难题!
|
前端开发
React通过jsonp来请求接口获取数据渲染数据
React通过jsonp来请求接口获取数据渲染数据
160 0