Fetch发送网络请求

1. 文档

https://github.github.io/fetch/
https://segmentfault.com/a/1190000003810652

2. 特点

fetch: 原生函数，不再使用XmlHttpRequest对象提交ajax请求
老版本浏览器可能不支持

3. 相关API

GET请求

fetch(url).then(function(response) {return response.json()}).then(function(data) {console.log(data)}).catch(function(e) {console.log(e)});

POST请求

 fetch(url, {method: "POST",body: JSON.stringify(data),}).then(function(data) {console.log(data)}).catch(function(e) {console.log(e)})

import React, {Component} from 'react';
import PubSub from 'pubsub-js'
import axios from "axios";class Search extends Component {search = async () => {// 获取用户的输入(连续解构赋值+重命名)const {keyWordElement: {value: keyword}} = this// 发送请求前通知List更新状态// this.props.updateAppState({isFirst: false, isLoading: true})PubSub.publish('zep', {isFirst: false, isLoading: true})// 发送网络请求---使用axios发送/*axios.get(`https://api.github.com/search/users?q=${keyword}`).then((response) => {// 请求成功后通知List更新状态// this.props.updateAppState({isLoading: false, users: response.data.items})console.log('Search组件发布消息')PubSub.publish('zep', {isLoading: false, users: response.data.items})},(error) => {// this.props.updateAppState({isLoading: false, err: error.message})PubSub.publish('zep', {isLoading: false, err: error.message})})
*/// 发送网络请求---使用fetch发送(未优化)/*fetch(`https://api.github.com/search/users?q=${keyword}`).then((response) => {console.log('联系服务器成功了')return response.json() // 返回一个promise对象，则失败状态},(error) => {console.log('联系服务器失败了', error)return new Promise(() => {}) // 返回一个初始化的promise，来中断链式调用}).then((response) => {console.log('获取数据成功', response)},(error) => {console.log('获取数据失败', error)})*/// 发送网络请求---使用fetch发送(优化)fetch(`https://api.github.com/search/users?q=${keyword}`).then((response) => {console.log('联系服务器成功了')return response.json() // 如果返回一个promise对象，则then的结果为失败状态}).then((response) => {console.log('获取数据成功', response)}).catch((error) => {console.log('请求出错', error)})/* try {const response = await fetch(`https://api.github.com/search/users?q=${keyword}`)const data = await response.json()// console.log(data)PubSub.publish('zep', {isLoading: false, users: data.items})} catch (error) {console.log('请求出错', error)PubSub.publish('zep', {isLoading: false, err: error.message})}*/}render() {return (<section className="jumbotron" style={{textAlign: "center"}}><h3 className="jumbotron-heading">搜索github用户</h3><div><input ref={c => this.keyWordElement = c} type="text" placeholder="输入关键词点击搜索"/>&nbsp;<button onClick={this.search}>搜索</button></div></section>);}
}export default Search;

4.1. 总结

设计状态时要考虑全面，例如带有网络请求的组件，要考虑请求失败怎么办。
ES6小知识点：解构赋值+重命名
let obj = {a:{b:1}}
const {a} = obj; //传统解构赋值
const {a:{b}} = obj; //连续解构赋值
const {a:{b:value}} = obj; //连续解构赋值+重命名
消息订阅与发布机制
1.先订阅，再发布（理解：有一种隔空对话的感觉）
2.适用于任意组件间通信
3.要在组件的componentWillUnmount中取消订阅
fetch发送请求（关注分离的设计思想）

try {const response= await fetch(`/api1/search/users2?q=${keyWord}`)const data = await response.json()console.log(data);} catch (error) {console.log('请求出错',error);}

Fetch发送网络请求相关推荐

网络编程-JavaScript中发送网络请求汇总
文章目录 1.前后端分离优势 2.HTTP协议的解析 2.1 HTTP的介绍 2.2 HTTP的组成 2.3 HTTP的版本 2.4 HTTP请求方式 2.5 HTTP请求头字段 2.6 HTTP响应 ...
fetch 发送 AJAX请求
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
vue如何发送网络请求，使用axios事半功倍！
目录一.axios使用 1.支持多种请求方式: 2.安装 3.简单使用实例 4.发送并发请求 5.全局配置二.axios的实例 1.为什么要创建 axios的实例呢? 2.使用三..axios模 ...
axios发送网络请求
网络模块封装选择什么网络模块传统的Ajax 缺点:配置和调用方式等非常混乱 jQuery-Ajax 缺点:在Vue整个开发中都是不需要使用jQuery的 axios axios 功能特点: 在浏览 ...
微信小程序中发送网络请求
文章目录小程序项目 app.json pages/index/index.html pages/index/index.wxss pages/index/index.js 发送网络请求网络请求函数 ...
OkHttp3 发送网络请求服务器
前言:应用程序需要发送网络请求服务器的接口,可使用OkHttp 3发送请求获取服务端数据 GitHut地址 Step 1:申请网络请求的权限:在manifests层的AndroidManifest.x ...
python 网络接口开发_Python自动化学习笔记（八）——接口开发、发送网络请求、发送邮件、写日志...
1.接口开发(flask模块) Python自动化学习笔记(七)接口开发部分的内容补充 1.1参数为json格式: flask.request.is_json #判断参数是否是json格式 flask ...
Python自动化学习笔记（八）——接口开发、发送网络请求、发送邮件、写日志...
1.接口开发(flask模块) Python自动化学习笔记(七)接口开发部分的内容补充 1.1参数为json格式: flask.request.is_json #判断参数是否是json格式 flask ...
Python发送网络请求(requests)
Python发送网络请求(requests) Python已经是广泛使用的脚本语言了,我们可以使用requests库进行网络请求. 在PyPI中搜索requests,就可以找到这个库 1. 安装 pi ...

Fetch发送网络请求

1. 文档

2. 特点

3. 相关API

4.1. 总结

Fetch发送网络请求相关推荐

最新文章

热门文章