每天学点React - React Ajax基础使用方式(一)

49 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第22 天,点击查看活动详情

React Ajax

前置说明

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

常用的ajax请求库

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

axios

首先,我们需要安装axios,再使用该库来发起请求。

安装命令(mac系统):sudo npm add axios

React案例代码

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

export default class App extends Component {
    
    // 使用axios请求接口获取数据
    getData = () => {
        axios.get('http://localhost:8080/')
        .then(
            response => {console.log(response.data)},
            error => {console.log(error)}
        )
    }

    render() {
        return (
            <div>
                <button onClick={this.getData}>获取数据</button>
            </div>
        )
    }
}

image.png

从效果图中可以看到,我们有发出请求,但是遇到了跨域的问题,那么该问题应该如何解决呢?

Node启动服务端

首先,我们使用node + express启动一个简单的测试用服务器,便于我们axios发起请求调用接口。

其中,express需要我们安装一下,命令(mac系统):sudo npm add express

// 引入express
const express = require('express')
const app = express()

app.use((request, response, next) => {
    console.log('服务器接收到请求!')
    next()
})

// 定义接口
app.get('/data', (request, response) => {
    const data = [
        {id: 1, name: 'zhangsan'},
        {id: 2, name: 'lisi'}
    ]
    response.send(data)
})

// 监听 5000 端口
app.listen(5000, (err) => {
    if(!err){
        console.log('服务器启动成功,地址: http://localhost:5000')
    }
})

React配置跨域代理

第一种 我们可以在package.json文件中配置proxy属性,将请求转发到我们启动的服务器端口上。

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

同时,需要将我们发出的请求端口改为当前应用端口

    getData = () => {
        axios.get('http://localhost:3000/')
        .then(
            response => {console.log(response.data)},
            error => {console.log(error)}
        )
    }

再测试一下,可以正常到拿到响应信息了。

image.png

需要注意的是,我们使用该方式转发的话,只有当本地没有对应路径的,才会转发到服务器端,如果本地有相关接口,则会有限请求到本地资源,例如:http://localhost:3000/index.html

image.png

拿到到是本地public目录下到index.html文件内容。