P22:React高级-axios数据请求

喜欢ヅ旅行 2023-10-06 20:51 9阅读 0赞

#### React16 基础 ####

*  阐述
 *  安装 Axios
 *  npm install -save 和 -save-dev分不清
 *  axios 请求数据
 *  示例
 *   *  Beauty.js
     *  tt.cc 的 index.php
 *  修改程序变为动态接口

## 阐述 ##

有了生命周期的知识，这节课学习远程数据请求的知识，小伙伴们肯定都知道，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 字符串。

![在这里插入图片描述][687fb73470bd40d6b38ec5b75e82df4f.png]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]

## 示例 ##

### 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  (
            <Fragment>
                {
        /* 正确注释的写法 */}
                <div>
                    <label htmlFor="willem">加入服务：</label>
                    <input 
                    id="willem" 
                    className="input" 
                    value={
        this.state.inputValue} 
                    onChange={
        this.inputChange.bind(this)}
                    //关键代码——----------start
                    ref={
        (input)=>{
        this.input=input}}
                    //关键代码------------end
                    />
                    <button onClick={
        this.addList.bind(this)}> 增加服务 </button>
                </div>
                <ul>
                    {
        
                        this.state.list.map((item,index)=>{
        
                            return (
                                <BeautyItem 
                                key={
        index+item}  
                                content={
        item}
                                index={
        index}
                                deleteItem={
        this.deleteItem.bind(this)}
                                />
                            )
                        })
                    }
                </ul>
            </Fragment>
        )
    }
    
        // 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 ###

<?php
    header('Access-Control-Allow-Origin: *');
    header("Access-Control-Allow-Headers: token,Origin, X-Requested-With, Content-Type, Accept");
    header('Access-Control-Allow-Methods: POST,GET');
    
    // yield方式
    // 耗时0.2580891秒
    // 内存: 339K
    $res = [
        'name'=>'willem',
        'age'=>31,
        'sex'=>'man',
        'user_id'=>$_GET['ID']
    ];
    
    echo json_encode($res, JSON_UNESCAPED_UNICODE);

## 修改程序变为动态接口 ##

在客户端已经得到了远程数据，那剩下的就是 `setState`一下就可以了，代码如下：

componentDidMount(){
        
        axios.get('xxxx')
            .then((res)=>{
        
                console.log('axios 获取数据成功:'+JSON.stringify(res))
    
                this.setState({
        
                    list:res.data.data
                })
              })
            .catch((error)=>{
        console.log('axios 获取数据失败'+error)})
    }

那这时候再浏览React程序，也是完全可以使用的，不过已经不是以前写死的东西，而是使用远端接口数据。

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 1]

`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.get('http://tt.cc/')
            .then((res)=>{
        
                // console.log(this.state.list)  res.data
                
                this.setState({
        
                    list:[res.data.name,res.data.sex]
                })
    
            })
            .catch((error)=>{
        
                console.log('axios 获取数据失败'+error)
            })
    }
    
    shouldComponentUpdate(){
        
        console.log('shouldComponentUpdate---组件发生改变前执行')
        return true
    }
    
    componentWillUpdate(){
        
        console.log('componentWillUpdate---组件更新前，shouldComponentUpdate函数之后执行')
    }
    
    render(){
        
        return  (
            <Fragment>
                {
        /* 正确注释的写法 */}
                <div>
                    <label htmlFor="willem">加入服务：</label>
                    <input 
                    id="willem" 
                    className="input" 
                    value={
        this.state.inputValue} 
                    onChange={
        this.inputChange.bind(this)}
                    //关键代码——----------start
                    ref={
        (input)=>{
        this.input=input}}
                    //关键代码------------end
                    />
                    <button onClick={
        this.addList.bind(this)}> 增加服务 </button>
                </div>
                <ul>
                    {
        
                        this.state.list.map((item,index)=>{
        
                            return (
                                <BeautyItem 
                                key={
        index+item}  
                                content={
        item}
                                index={
        index}
                                deleteItem={
        this.deleteItem.bind(this)}
                                />
                            )
                        })
                    }
                </ul>
            </Fragment>
        )
    }
    
        // 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

[687fb73470bd40d6b38ec5b75e82df4f.png]: https://img-blog.csdnimg.cn/687fb73470bd40d6b38ec5b75e82df4f.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/2d2accee190240a28838e2d286113086.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/edfb3ab1462644ff969ad6c9a2128b77.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16