React 学习笔记 —— 使用 axios 发起 ajax 请求

最新推荐文章于 2024-05-29 11:56:40 发布

tanleiDD

最新推荐文章于 2024-05-29 11:56:40 发布

阅读量334

点赞数

分类专栏： React 文章标签： react

本文链接：https://blog.csdn.net/TL18382950497/article/details/115438351

版权

React 专栏收录该内容

34 篇文章 1 订阅

订阅专栏

本文介绍了如何通过命令行安装axios，并展示了一个使用Express创建的本地服务器，提供了一个简单的/students接口。同时，讲解了在package.json中配置代理以解决跨域问题，演示了在React应用中使用axios从本地服务器获取数据并渲染到页面上的过程。

摘要由CSDN通过智能技术生成

安装 axios

命令行运行：

yarn add axios

使用案例

准备测试用的后端接口

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');
})

在 package.json 中配置代理

该配置意为，将请求转发到本地的5000端口，用于跨域，但有一点特别，并不是所有的请求都会被转发到本地的5000端口，而是在当前请求的位置找不到资源时，才会进行转发
使用 axios

import React, { Component } from 'react'
import axios from 'axios'	// 引入
export default class App extends Component {
  constructor () {
    super()
    this.state = {
      students: []
    }

  }
  componentDidMount () {
  	// 发出请求
  	// 因为 在 3000 端口 找不到 students 接口，因此会被转发到 5000 端口
    axios.get('http://localhost:3000/students').then(res=>{
      this.setState({
        students: res.data
      })
    })
  }
  render() {
    return (
      <ul>
        {
          this.state.students.map(d => (
            <li key={d.id}>name: {d.name}, age: {d.age}</li>
          ))
        }
      </ul>
    )
  }
}