基于 react 18.0.2、create-react-app 5.0.1

1. 理解

1.1 前置说明

React 本身只关注于界面, 并不包含发送 ajax 请求的代码
前端应用需要通过 ajax 请求与后台进行交互 (json数据)
react 应用中需要集成第三方 ajax 库(或自己封装)

1.2 常用的 ajax 请求库

jQuery: 比较重, 如果需要另外引入不建议使用
axios: 轻量级, 建议使用
- 封装 XmlHttpRequest 对象的 ajax
- promise 风格
- 可以用在浏览器端和 node 服务器端

原始的发 ajax 请求的方式， const xhr = new XMLHttpRequest()

2. axios

2.1 文档

https://github.com/axios/axios

2.2 相关 API

GET 请求

axios
    .get("/user?ID=12345")
    .then(function (response) {
        console.log(response.data);
    })
    .catch(function (error) {
        console.log(error);
    });

axios
    .get("/user", {
        params: {
            ID: 12345,
        },
    })
    .then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });

POST 请求

axios
    .post("/user", {
        firstName: "Fred",
        lastName: "Flintstone",
    })
    .then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });

3. 配置代理

3.1 为什么需要配置代理？

我们的服务跑在 3000 端口，当我们需要向别的域名或者端口发送请求的时候会产生跨域，通过配置代理可以解决此问题。

跨域是一种浏览器策略，我们的请求可以正常发送，但响应的数据被浏览器(或者 ajax) 拦截了，通过配置代理的方式，帮我们转了一层，相当于修改了响应时的来源地址，所以可以避免跨域。

3.2 配置代理的方式

3.2.1 配置 proxy

在 package.json 中追加如下配置

"proxy":"http://localhost:5000"

说明：

优点：配置简单，前端请求资源时可以不加任何前缀。
缺点：不能配置多个代理。
工作方式：上述方式配置代理，当请求了 3000 不存在的资源时，那么该请求会转发给 5000 （优先匹配前端资源）

设置 proxy 后项目无法正常启动，通过设置环境变量 DANGEROUSLY_DISABLE_HOST_CHECK=true 后解决。

错误信息

Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.

options.allowedHosts[0] should be a non-empty string.

3.2.2 通过 setupProxy(推荐)

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

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

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

const {createProxyMiddleware} = require('http-proxy-middleware');

module.exports = function (app) {
  app.use('/api1', //api1是需要转发的请求(所有带有/api1前缀的请求都会转发给5000)
      createProxyMiddleware({
        target: 'https://api.github.com', //请求转发给谁
        changeOrigin: true,//控制服务器收到的请求头中Host的值
        /*
         changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
         changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:3000
         changeOrigin默认值为false，但我们一般将changeOrigin值设为true
        */
        pathRewrite: {'^/api1': ''} //去除请求前缀，保证交给后台服务器的是正常请求地址(必须配置)
      }));

  // 你可以继续添加更多的代理配置...
  app.use('/auth',
      createProxyMiddleware({
        target: 'http://localhost:4000',
        changeOrigin: true,
      }));
};

说明：

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

4. 案例-github 用户搜索

github_users

请求地址: https://api.github.com/search/users?q=xxxxxx

axios 实现

首先配置 setupProxy.js , 此处不再累述

List/index.jsx

import React, {Component} from 'react'
import './index.css'

export default class List 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="head_portrait"
                     src={userObj.avatar_url}
                     style={{width: '100px'}}/>
              </a>
              <p className="card-text">{userObj.login}</p>
            </div>)
          })}
    </div>)
  }
}

Search/index.jsx

import React, {Component} from 'react'
import axios from 'axios'

export default class Search extends Component {

  search = () => {
    //获取用户的输入(连续解构赋值+重命名)
    const {keyWordElement: {value: keyWord}} = this
    //发送请求前通知App更新状态
    this.props.updateAppState({isFirst: false, isLoading: true})
    //发送网络请求
    axios.get(`/api1/search/users?q=${keyWord}`).then(response => {
      //请求成功后通知App更新状态
      this.props.updateAppState({isLoading: false, users: response.data.items})
    }, error => {
      //请求失败后通知App更新状态
      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="输入关键词点击搜索"/>&nbsp;
        <button onClick={this.search}>搜索</button>
      </div>
    </section>)
  }
}

App.jsx

import React, {Component} from 'react'
import Search from './components/Search'
import List from './components/List'

export default class App extends Component {

  state = { //初始化状态
    users: [], //users初始值为数组
    isFirst: true, //是否为第一次打开页面
    isLoading: false,//标识是否处于加载中
    err: '',//存储请求相关的错误信息
  }

  //更新App的state
  updateAppState = (stateObj) => {
    this.setState(stateObj)
  }

  render() {
    return (
        <div className="container">
          <Search updateAppState={this.updateAppState}/>
          <List {...this.state}/>
        </div>
    )
  }
}

5. 消息订阅-发布机制

工具库: PubSubJS
下载: npm install pubsub-js --save
使用:
1. import PubSub from 'pubsub-js' //引入
2. PubSub.subscribe('delete', function(data){ }); //订阅
3. PubSub.publish('delete', data) //发布消息

案例

List/index.jsx

import React, {Component} from 'react'
import PubSub from 'pubsub-js'
import './index.css'

export default class List extends Component {

  state = { //初始化状态
    users: [], //users初始值为数组
    isFirst: true, //是否为第一次打开页面
    isLoading: false,//标识是否处于加载中
    err: '',//存储请求相关的错误信息
  }

  componentDidMount() {
    this.token = PubSub.subscribe('atguigu', (_, stateObj) => {
      this.setState(stateObj)
    })
  }

  componentWillUnmount() {
    PubSub.unsubscribe(this.token)
  }

  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="head_portrait"
                     src={userObj.avatar_url}
                     style={{width: '100px'}}/>
              </a>
              <p className="card-text">{userObj.login}</p>
            </div>)
          })}
    </div>)
  }
}

Search/index.jsx

import React, {Component} from 'react'
import PubSub from 'pubsub-js'
import axios from 'axios'

export default class Search extends Component {

  search = () => {
    //获取用户的输入(连续解构赋值+重命名)
    const {keyWordElement: {value: keyWord}} = this
    //发送请求前通知List更新状态
    PubSub.publish('atguigu', {isFirst: false, isLoading: true})
    //发送网络请求
    axios.get(`/api1/search/users?q=${keyWord}`).then(response => {
      //请求成功后通知List更新状态
      PubSub.publish('atguigu', {isLoading: false, users: response.data.items})
    }, error => {
      //请求失败后通知App更新状态
      PubSub.publish('atguigu', {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="输入关键词点击搜索"/>&nbsp;
        <button onClick={this.search}>搜索</button>
      </div>
    </section>)
  }
}

App.js

import React, {Component} from 'react'
import Search from './components/Search'
import List from './components/List'

export default class App extends Component {
  render() {
    return (<div className="container">
      <Search/>
      <List/>
    </div>)
  }
}

6. 扩展：Fetch

本节需要了解 Promise 知识

6.1 文档

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

6.2 特点

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

6.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);
    });

6.4 例子

优化前

fetch(`/api1/search/users2?q=${keyWord}`)
    .then(
        (response) => {
            console.log("联系服务器成功了");
            return response.json();
        },
        (error) => {
            console.log("联系服务器失败了", error);
            // 返回一个 pendding 状态的 promise，可以中断 promise 的执行
            return new Promise(() => {});
        }
    )
    .then(
        (response) => {
            console.log("获取数据成功了", response);
        },
        (error) => {
            console.log("获取数据失败了", error);
        }
    );

优化后

try {
    const response = await fetch(`/api1/search/users2?q=${keyWord}`);
    const data = await response.json();
    console.log(data);
    PubSub.publish("atguigu", { isLoading: false, users: data.items });
} catch (error) {
    console.log("请求出错", error);
    PubSub.publish("atguigu", { isLoading: false, err: error.message });
}

如果觉得文章对你有用，请随意赞赏

前端 react ajax

React ajax

https://blog.rainsheep.cn/archives/reactajax

作者

Rainsheep

发布于

2023-08-19

更新于

2023-12-29

许可协议

CC BY 4.0