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 ( <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

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

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

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