React学习笔记（六）

最新推荐文章于 2024-11-14 12:45:47 发布

皮卡卡卡

最新推荐文章于 2024-11-14 12:45:47 发布

阅读量39

点赞数

文章标签： react.js 学习笔记前端前端框架

本文链接：https://blog.csdn.net/qq_44808878/article/details/132972685

版权

theme: channing-cyan

一.React ajax

React本身只关注与页面，并不包含发送ajax请求的代码，所以一般都是集成第三方的一些库，或者自己进行封装。

推荐使用axios。

在使用的过程中很有可能会出现跨域的问题，这样就应该配置代理。

所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol)，主机(host)和端口号(port)，当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。

那么react通过代理解决跨域问题呢？

方法一 在package.json中追加如下配置 "proxy":"请求的地址" "proxy":"http://localhost:5000" 说明：
优点：配置简单，前端请求资源时可以不加任何前缀。
缺点：不能配置多个代理。
工作方式：上述方式配置代理，当请求了3000不存在的资源时，那么该请求会转发给5000 (优先匹配前端资源)
方法二

第一步：创建代理配置文件

在src下创建配置文件：src/setupProxy.js
编写setupProxy.js配置具体代理规则：

```js const proxy = require('http-proxy-middleware')

module.exports = function(app) { app.use( proxy('/api1', { //api1是需要转发的请求(所有带有/api1前缀的请求都会转发给5000) target: 'http://localhost:5000', //配置转发目标地址(能返回数据的服务器地址) changeOrigin: true, //控制服务器接收到的请求头中host字段的值 /* changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000 changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:3000 changeOrigin默认值为false，但我们一般将changeOrigin值设为true */ pathRewrite: {'^/api1': ''} //去除请求前缀，保证交给后台服务器的是正常请求地址(必须配置) }), proxy('/api2', { target: 'http://localhost:5001', changeOrigin: true, pathRewrite: {'^/api2': ''} }) ) } ```

说明：

优点：可以配置多个代理，可以灵活的控制请求是否走代理。
缺点：配置繁琐，前端请求资源时必须加前缀。

二. 兄弟之间进行通信

这就要借助消息订阅和发布机制。

举个例子来说就是张三想要跟李四进行通信，张三就需要订阅一个消息【比如A消息】，李四想要给张三数据，就必须发布一个A消息，在发布的同时将数据放入消息中，因为张三订阅了名称为A的消息，此时就能接受到李四发布的消息，从而获取到数据。

这就有点类似于看报纸，甲想要知道每天都发生什么事情，于是订阅了每天日报，乙每天都会发布这个每天日报，因为甲订阅了，于是乙就会每天就给甲方推送，甲方从而获取数据。

在消息订阅和发布中，我们可以使用PubSubJs进行通信：

需要安装npm i pubsub-js

引入PubSubJs:

js import PubSub from 'pubsub-js'

订阅消息：

js PubSub.subscribe("getSate",(_,data)=>{ console.log(data) }) PubSub.subscribe("订阅的消息名称",回调函数，第一个参数是消息名称，可以使用_来占位，第二个是传递的数据 })

发布消息：

js PubSub.publish("getSate",{isFrist:false,isLoad:true}) PubSub.publish("订阅的消息名称",传递的数据)

三. async和await

async:

该关键字是放在函数之前的，使得函数成为一个异步函数，他最大的特点就是将函数回封装成Promise，也就是被他修饰的函数的返回值都是Promise对象。而这个Promise对象的状态则是由函数执行的返回值决定的。

如果返回的是一个非promise对象，该函数将返回一个成功的Promise，成功的值则是返回的值；

如果返回的是一个promise对象，则该函数返回的就是该promise对应的状态。

await

await右边是一个表达式，如果该表达式返回的是一个Promise对象，则左边接收的结果就是该Promise对象成功的结果，如果该Promise对象失败了，就必须使用try..catch来捕获。如果该表达式返回的是是一个不是promise对象，则左边接受的就是该表达式的返回值。

当 await 关键字与异步函数一起使用时，它的真正优势就变得明显了 —— 事实上， await 只在异步函数里面才起作用。它可以放在任何异步的，基于 promise 的函数之前。它会暂停代码在该行上，直到 promise 完成，然后返回结果值。在暂停的同时，其他正在等待执行的代码就有机会执行了。

举个例子： ```js f1 = () =>{ return new Promise((resolve,reject)=>{ // resolve(1); reject("错误") }) }

async function test(){
    try{
       const p =  await f1();
       console.log(p)
    }catch(error){
        console.error(error)
    }
}
test();

```

三. fetch

以前发送请求，使用ajax或者axios，现在还可以使用fetch。这个是window自带的，和xhr是一个级别的。

可以查看阮一峰老师的文章，写的真的不错： fetch

四.github请求案例

4.1 React实现

4.1.1静态页面拆分实现

大致的目录结构

1641990073(1).jpg + 在public/index.html中引入bootstrap.css html <link rel="stylesheet" href="./css/bootstrap.css"> + App.jsx ```jsx import React, { Component } from 'react' import Search from './components/Search' import List from './components/List'

export default class App extends Component { render() { return (

+ components/List/index.jsx jsx import React, { Component } from 'react' import './index.css'

export default class Users extends Component { render() { return (

reactjs

) } } ``` + components/List/index.css

```css .album { min-height: 50rem; /* Can be removed; just added for demo purposes */ padding-top: 3rem; padding-bottom: 3rem; background-color: #f7f7f7; }

.card { float: left; width: 33.333%; padding: .75rem; margin-bottom: 2rem; border: 1px solid #efefef; text-align: center; }

.card > img { margin-bottom: .75rem; border-radius: 100px; }

.card-text { font-size: 85%; } ```

O5CTFB_2W6~QIUWAOEDE2WJ.png

4.2.2 动态交互实现

由于github访问失败，可以伪造一个服务器返回一些固定的结果，让用户体验更佳使用express搭建一个服务器。

server.js ```js const express = require("express") const axios = require("axios") const app = express()

/* 请求地址： http://localhost:3000/search/users?q=aa

后台路由 key： /search/users value： function () {} */ app.get("/search/users", function (req, res) { const {q} = req.query axios({ url: 'https://api.github.com/search/users', params: {q} }).then(response => { res.json(response.data) }) })

app.get("/search/users2", function (req, res) { res.json({ items: [ { login: "yyx990803", htmlurl: "https://github.com/yyx990803", avatarurl: "https://avatars3.githubusercontent.com/u/499550?s=460&u=de41ec9325e8a92e281b96a1514a0fd1cd81ad4a&v=4", id: 1, }, { login: "ruanyf", htmlurl: "https://github.com/ruanyf", avatarurl: "https://avatars2.githubusercontent.com/u/905434?s=460&v=4", id: 2, }, { login: "yyx9908032", htmlurl: "https://github.com/yyx990803", avatarurl: "https://avatars3.githubusercontent.com/u/499550?s=460&u=de41ec9325e8a92e281b96a1514a0fd1cd81ad4a&v=4", id: 3, }, { login: "ruanyf2", htmlurl: "https://github.com/ruanyf", avatarurl: "https://avatars2.githubusercontent.com/u/905434?s=460&v=4", id: 4, }, { login: "yyx9908033", htmlurl: "https://github.com/yyx990803", avatarurl: "https://avatars3.githubusercontent.com/u/499550?s=460&u=de41ec9325e8a92e281b96a1514a0fd1cd81ad4a&v=4", id: 5, }, { login: "ruanyf3", htmlurl: "https://github.com/ruanyf", avatarurl: "https://avatars2.githubusercontent.com/u/905434?s=460&v=4", id: 6, }, { login: "yyx9908034", htmlurl: "https://github.com/yyx990803", avatarurl: "https://avatars3.githubusercontent.com/u/499550?s=460&u=de41ec9325e8a92e281b96a1514a0fd1cd81ad4a&v=4", id: 7, }, { login: "ruanyf4", htmlurl: "https://github.com/ruanyf", avatarurl: "https://avatars2.githubusercontent.com/u/905434?s=460&v=4", id: 8, }, { login: "yyx9908035", htmlurl: "https://github.com/yyx990803", avatarurl: "https://avatars3.githubusercontent.com/u/499550?s=460&u=de41ec9325e8a92e281b96a1514a0fd1cd81ad4a&v=4", id: 9, }, ], }); });

app.listen(5000, "localhost", (err) => { if (!err){ console.log("服务器启动成功") console.log("请求github真实数据请访问：http://localhost:5000/search/users") console.log("请求本地模拟数据请访问：http://localhost:5000/search/users2") } else console.log(err); }) ````

{`T23O@5LM~TO2$(NJQ7JWG.png

src/setupProxy.js ```jsx const proxy = require('http-proxy-middleware')

module.exports = function(app){ app.use( proxy('/api1',{ //遇见/api1前缀的请求，就会触发该代理配置 target:'http://localhost:5000', //请求转发给谁 changeOrigin:true,//控制服务器收到的请求头中Host的值 pathRewrite:{'^/api1':''} //重写请求路径(必须) }) ) } **【补充】连续解构赋值** js let obj = {a:{b:{c:1}}} console.log(a.b.c) // 1 const {a:{b:{c}}} = obj console.log(c) // 1

let obj2 = {a:{b:1}} const {a:{b:data}} = obj2 // 重命名 console.log(data) // 1 + App.jsx 将状态数据定义在App中操作状态的方法放在App中 jsx export default class App extends Component { state = { users: [] } saveUsers = (users) => { this.setState({ users }) } render() { const {users} = this.state return (

+ components/Search/index/jsx jsx export default class Search extends Component { search = () => { // 获取用户输入(连续解构赋值+重命名) const {keyWordElement: {value: keyWord}} = this // console.log(keyWord) // 发送网络请求 axios.get( /api1/search/users?q=${keyWord}).then( response => { console.log('成功') this.props.saveUsers(response.data.items) }, error => {console.log('失败',error)} ) } render() { return (

搜索Github用户

) } } + components/List/index/jsx jsx export default class List extends Component { render() { return (

{ this.props.users.map((userObj) => { return (

{userObj.login}

) }) }

) } } ```

效果展示

$_MYJ767PB$[7G{IO@G])CO4.png$

4.2.3 优化用户体验

List组件中，应该不止只有用户列表页面，应该还有

欢迎使用界面【第一次打开页面】
搜索加载页面【点击按钮发送请求和接收到响应之间显示】
搜索失败页面【请求失败显示】

有四种不同的显示，那就需要不同的状态state来控制 jsx export default class App extends Component { // 初始化状态 state = { users: [], // users初始值 isFirst: true, // 是否第一次打开页面 isLoading: false, // 标识是否处于加载中 err:'' // 请求失败的消息 } // saveUsers = (users) => { // this.setState({ users }) // } // 更新App的state updateAppState = (stateObj) => { this.setState(stateObj) } render() { return ( <div className="container"> <Search updateAppState={this.updateAppState} /> <Users {...this.state} /> </div> ) } } + components/Search/index.jsx jsx export default class App extends Component { // 初始化状态 state = { users: [], // users初始值 isFirst: true, // 是否第一次打开页面 isLoading: false, // 标识是否处于加载中 err:'' // 请求失败的消息 } // saveUsers = (users) => { // this.setState({ users }) // } // 更新App的state updateAppState = (stateObj) => { this.setState(stateObj) } render() { return ( <div className="container"> <Search updateAppState={this.updateAppState} /> <Users {...this.state} /> </div> ) } } + components/List/index.jsx jsx export default class Users extends Component { render() { const {users, isFirst, isLoading, err} = this.props return ( <div className="row"> { isFirst ? <h2>欢迎使用，请输入关键字，随后点击搜索</h2> : isLoading ? <h2>Loading...</h2> : err ? <h2 style={{color: 'red'}}>{err}</h2> : users.map((userObj) => { return ( <div key={userObj.id} className="card"> <a rel="noreferrer" href={userObj.html_url} target="_blank"> <img alt="avatar" src={userObj.avatar_url} style={{ 'width': '100px' }}/> </a> <p className="card-text">{userObj.login}</p> </div> ) }) } </div> ) } }

5.消息发布订阅

上述已经讲到如何使用pubsub-js,这里在案例中用一下。

List组件【接收】数据，所以List组件【订阅】消息 Search组件将数据发送出去，【发布】消息.

App.jsx jsx export default class App extends Component { render() { return ( <div className="container"> <Search /> <Users /> </div> ) } }
components/List/index.jsx jsx export default class Users extends Component { // 初始化状态 state = { users: [], // users初始值 isFirst: true, // 是否第一次打开页面 isLoading: false, // 标识是否处于加载中 err:'' // 请求失败的消息 } componentDidMount() { // 订阅消息 PubSub.subscribe('ykyk', (_, data) => { this.setState(data) }) } render() { const {users, isFirst, isLoading, err} = this.state return ( <div className="row"> { isFirst ? <h2>欢迎使用，请输入关键字，随后点击搜索</h2> : isLoading ? <h2>Loading...</h2> : err ? <h2 style={{color: 'red'}}>{err}</h2> : users.map((userObj) => { return ( <div key={userObj.id} className="card"> <a rel="noreferrer" href={userObj.html_url} target="_blank"> <img alt="avatar" src={userObj.avatar_url} style={{ 'width': '100px' }}/> </a> <p className="card-text">{userObj.login}</p> </div> ) }) } </div> ) } }
components/List/index.jsx jsx export default class Search extends Component { search = () => { const {keyWordElement: {value: keyWord}} = this // 发送请求前通知Users更新状态 // this.props.updateAppState({isFirst: false,isLoading: true}) PubSub.publish('ykyk', {isFirst: false,isLoading: true}) // 发送网络请求 axios.get(`/api1/search/users?q=${keyWord}`).then( response => { // 请求成功，通知Users更新状态 PubSub.publish('ykyk', {isLoading: false, users: response.data.items}) // this.props.updateAppState({isLoading: false, users: response.data.items}) }, error => { // 请求失败，通知Users更新状态 PubSub.publish('ykyk', {isLoading: false, err: error.message}) // this.props.updateAppState({isLoading: false, err: error.message}) } ) } render() { return ( <section className="jumbotron"> <h3 className="jumbotron-heading">搜索Github用户</h3> <div> <input ref={c => this.keyWordElement = c} type="text" placeholder="请输入你要搜索的用户名" />  <button onClick={this.search}>搜索</button> </div> </section> ) } }
6.fetch

Axios在前端是对xhr的封装而Fetch是内置的网络请求方法，不需要单独下载安装.

6.1 文档

6.2 特点

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

6.3 实例演示

components/Search/index.jsx 优化前 ```jsx export default class Search extends Component { search = async()=>{ //获取用户的输入(连续解构赋值+重命名) const {keyWordElement:{value:keyWord}} = this //发送请求前通知List更新状态 PubSub.publish('ykyk',{isFirst:false,isLoading:true})

//发送网络请求---使用fetch发送(未优化)
fetch(`/api1/search/users2?q=${keyWord}`).then(
    response => {
        console.log('联系服务器成功了');
        return response.json()
    },
    error => {
        console.log('联系服务器失败了',error);
        return new Promise(()=>{})
    }
).then(
    response => {console.log('获取数据成功了',response);},
    error => {console.log('获取数据失败了',error);}
)

} } 优化后 jsx export default class Search extends Component { search = async()=>{ //获取用户的输入(连续解构赋值+重命名) const {keyWordElement:{value:keyWord}} = this //发送请求前通知List更新状态 PubSub.publish('ykyk',{isFirst:false,isLoading:true})

//发送网络请求---使用fetch发送(优化)
try {
    const response = await fetch(`/api1/search/users2?q=${keyWord}`)
    const data = await response.json()
    // console.log(data);
    PubSub.publish('ykyk',{isLoading:false, users:data.items})
} catch (error) {
    // console.log('请求出错',error);
    PubSub.publish('ykyk',{isLoading:false, err:error.message})
}

} } ```

五.总结

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

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

六.参考

React官网：https://react.docschina.org/

尚硅谷视频:https://www.bilibili.com/video/BV1wy4y1D7JT

MDN:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await

思否：https://segmentfault.com/a/1190000003810652

阮一峰：http://www.ruanyifeng.com/blog/2020/12/fetch-tutorial.html

PubSubJS: https://github.com/mroderick/PubSubJS