P22:React高级-axios数据请求

阐述

有了生命周期的知识，这节课学习远程数据请求的知识，小伙伴们肯定都知道，ajax可以远程请求，但是这写起来太麻烦了，我们用程序的ajax请求框架 Axios 来实现。

安装 Axios

Axios 的安装可以使用 npm 来进行安装，你可以直接在项目根目录下，输入下面的代码。

npm install -save axios

查看本地配置

PS D:\ReactDemo\demo01> npm install -save axios

added 1 package in 4s

35 packages are looking for funding
  run `npm fund` for details
PS D:\ReactDemo\demo01> npm list --depth 0
demo01@0.1.0 D:\ReactDemo\demo01>
+-- @testing-library/jest-dom@5.16.1
+-- @testing-library/react@11.2.7
+-- @testing-library/user-event@12.8.3
+-- axios@0.24.0
+-- bindings@1.5.0 extraneous
+-- file-uri-to-path@1.0.0 extraneous
+-- nan@2.15.0 extraneous
+-- react-dom@17.0.2
+-- react-scripts@4.0.3
+-- react@17.0.2
`-- web-vitals@1.1.2

npm install -save 和 -save-dev分不清

npm install xxx: 安装项目到项目目录下，不会将模块依赖写入devDependencies 或dependencies。

npm install -g xxx: -g 的意思是将模块安装到全局，具体安装到磁盘哪个位置，要看 npm cinfig prefix 的位置。

npm install -save xxx：-save的意思是将模块安装到项目目录下，并在 package 文件的dependencies节点写入依赖。

npm install -save-dev xxx：-save-dev 的意思是将模块安装到项目目录下，并在 package 文件的 devDependencies 节点写入依赖。

作为一个前端，要清楚的知道 npm install 这四种用法，防止项目依赖错误，在别人下载你的代码没办法跑起来。

axios 请求数据

安装好 axios 之后，需要在使用ajax的地方先引入axios,比如现在想在 Beauty.js 中使用axios，写入下面的代码进行引入:

import axios from 'axios'

引入后，可以在 componentDidMount 生命周期函数里请求ajax， 我也建议在 componentDidMount 函数里执行，因为在render里执行，会出现很多问题，比如一直循环渲染；在 componentWillMount 里执行，在使用 RN 时，又会有冲突。

所以强烈建议在 componentDidMount 函数里作ajax请求。

componentDidMount(){
    axios.post('https://i.snssdk.com/log/sentry/v2/api/slardar/batch/')
        .then((res)=>{console.log('axios 获取数据成功:'+res)  })
        .catch((error)=>{console.log('axios 获取数据失败'+error)})
}

JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。

示例 Beauty.js

import React,{Component,Fragment } from 'react'
import BeautyItem from './BeautyItem'
import axios from 'axios'

class Beauty extends Component{
//js的构造函数，由于其他任何函数执行
constructor(props){
    super(props) //调用父类的构造函数，固定写法
    this.state={
        inputValue:'' , // input中的值
        list:['基础按摩','精油推背']    //服务列表
    }
}

componentDidMount(){
    axios.post('http://tt.cc/')
        .then((res)=>{
            console.log('axios 获取数据成功:'+JSON.stringify(res))  
        })
        .catch((error)=>{
            console.log('axios 获取数据失败'+error)
        })
}

shouldComponentUpdate(){
    console.log('shouldComponentUpdate---组件发生改变前执行')
    return true
}

componentWillUpdate(){
    console.log('componentWillUpdate---组件更新前，shouldComponentUpdate函数之后执行')
}

render(){
    return  (
        
            {/* 正确注释的写法 */}
            
                加入服务：
                {this.input=input}}
                //关键代码------------end
                />
                 增加服务 
            
            
                {
                    this.state.list.map((item,index)=>{
                        return (
                            
                        )
                    })
                }
            
        
    )
}

    // inputChange(e){
    //     // console.log(e.target.value);
    //     // this.state.inputValue=e.target.value;
    //     this.setState({
    //         inputValue:e.target.value
    //     })
    // }

    inputChange(){
        console.log(this.input.value);
        this.setState({
            inputValue:this.input.value
        })
    }
    
    //增加服务的按钮响应方法
    addList(){
        this.setState({
            list:[...this.state.list,this.state.inputValue],
            inputValue:''
        })

    }
   //删除单项服务
   deleteItem(index){
    let list = this.state.list
    list.splice(index,1)
    this.setState({
        list:list
    })
}

}
export default Beauty

tt.cc 的 index.php