[尚硅谷React笔记]——第4章 React ajax

目录：

脚手架配置代理_方法一
1. server1.js
2. 开启服务器server1:
3. App.js
4. 解决跨域问题：
脚手架配置代理_方法二
1. server2.js
2. 开启服务器server2
3. 第一步：创建代理配置文件
4. 编写setupProxy.js配置具体代理规则：
5. App.js
6. 运行结果：
7. 说明：
github用户搜索案例
1. github搜索案例_静态组件
2. github搜索案例_axios发送请求
3. github搜索案例_展示数据
4. github搜索案例_完成案例
消息订阅与发布_pubsub
fetch发送请求

1.脚手架配置代理_方法一

server1.js


const express = require('express')
const app = express()
 
app.use((request,response,next)=>{
	console.log('有人请求服务器1了');
	console.log('请求来自于',request.get('Host'));
	console.log('请求的地址',request.url);
	next()
})
 
app.get('/students',(request,response)=>{
	const students = [
		{id:'001',name:'tom',age:18},
		{id:'002',name:'jerry',age:19},
		{id:'003',name:'tony',age:120},
	]
	response.send(students)
})
 
app.listen(5000,(err)=>{
	if(!err) console.log('服务器1启动成功了,请求学生信息地址为：http://localhost:5000/students');
})

开启服务器server1:

App.js


import React, {Component} from 'react';
import axios from "axios";
 
class App extends Component {
    getStudentData = () => {
        axios.get('http://localhost:5000/students').then(
            response => {
                console.log('成功了', response.data);
            },
            error => {
                console.log('失败了', error);
            }
        )
    }
 
    render() {
        return (

);
}
}
export default App;

解决跨域问题：

package.json


{
  "name": "20231003",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.5.1",
    "nanoid": "^5.0.1",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "proxy": "http://localhost:5000"
  }
}

使用方法一遇到了bug,去stackoverflow解决一下，能解决，但是有更好的方法，方法一不在继续了.node.js - Invalid options object. Dev Server has been initialized using an options object that does not match the API schema - Stack Overflow

2.脚手架配置代理_方法二

server2.js


const express = require('express')
const app = express()
 
app.use((request,response,next)=>{
	console.log('有人请求服务器2了');
	next()
})
 
app.get('/cars',(request,response)=>{
	const cars = [
		{id:'001',name:'奔驰',price:199},
		{id:'002',name:'马自达',price:109},
		{id:'003',name:'捷达',price:120},
	]
	response.send(cars)
})
 
app.listen(5001,(err)=>{
	if(!err) console.log('服务器2启动成功了,请求汽车信息地址为：http://localhost:5001/cars');
})

开启服务器server2

访问端口：

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

在src下创建配置文件：src/setupProxy.js

编写setupProxy.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': ''}
})
)
}

我使用的node是：v18.18.0

//react 18版本写法
const {createProxyMiddleware} = require('http-proxy-middleware')

module.exports = function (app) {
    app.use(
        createProxyMiddleware('/api1', {
            target: 'http://localhost:5000',
            changeOrigin: true,
            pathRewrite: {'^/api1': ''}
        }),
        createProxyMiddleware('/api2', {
            target: 'http://localhost:5001',
            changeOrigin: true,
            pathRewrite: {'^/api2': ''}
        }),
    )
}

App.js


import React, {Component} from 'react';
import axios from "axios";
 
class App extends Component {
    getStudentData = () => {
        axios.get('http://localhost:3000/api1/students').then(
            response => {
                console.log('成功了', response.data);
            },
            error => {
                console.log('失败了', error);
            }
        )
    }
 
    getCarData = () => {
        axios.get('http://localhost:3000/api2/cars').then(
            response => {
                console.log('成功了', response.data);
            },
            error => {
                console.log('失败了', error);
            }
        )
    }
 
    render() {
        return (

);

}

export default App;

运行结果：

说明：

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

3.github用户搜索案例

github搜索案例_静态组件

App.js


import React, {Component} from 'react';
import Search from './components/Search/Search'
import List from "./components/List/List";
 
class App extends Component {
    render() {
        return (
            
                "container">

[尚硅谷React笔记]——第4章 React ajax

1.脚手架配置代理_方法一

server1.js

开启服务器server1:

App.js

解决跨域问题：

2.脚手架配置代理_方法二

server2.js

开启服务器server2

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

编写setupProxy.js配置具体代理规则：

App.js

运行结果：

说明：

3.github用户搜索案例

github搜索案例_静态组件

"jumbotron-heading">Search Github Users

github搜索案例_axios发送请求

"jumbotron-heading">搜索github用户

github搜索案例_展示数据

"jumbotron-heading">搜索github用户

github搜索案例_完成案例

"jumbotron-heading">搜索github用户

欢迎使用,输入关键字，然后点击搜索

加载中...

'red'}}>{err}

4.消息订阅与发布_pubsub

欢迎使用,输入关键字，然后点击搜索

加载中...

'red'}}>{err}

"jumbotron-heading">搜索github用户

5.fetch发送请求

"jumbotron-heading">搜索github用户