1 引入

• 在学请求时需要先了解一下react的生命周期
  

1 this.state={} 初始化数据state
2 componentWillMount 组件将要被挂载,还未创建渲染DOM
3 render 虚拟DOM已经被渲染好,并且已经存放在内存中
4 componentDidMount 组件已经被渲染到页面 可以发送网络请求和DOM操作

1 componentWIllReciveProps当父组件传来的值发生改变时
2 shouldComponentUpdate 组件是否要更新返回为true或false
3 componentWillUpdate 组件将要被更新,还未渲染虚拟DOM
4 render 渲染虚拟DOM,并且在内存中
5 componentDidUpdate 组件已经被更新,虚拟DOM渲染到内存中

1 componentWillUnMount 组件将要被销毁
2 UnMount 组件被销毁

2 请求

• 了解生命周期后,发送请求应该在componentDidMount

2.1 项目结构

• 文件结构如下:
  
• 页面结构如下
  -

2.1.1 文件如下

• APP.js

import React,{Component} from 'react'
export default class APP extends Component{
    constructor() {
        super();
    }
    render() {
        return(
            <div>APP </div>
        )
    }
}

• index.js

import React from 'react';
import ReactDOM from 'react-dom';
import APP from "./APP";

ReactDOM.render(
  <div>
      <APP/>
  </div>,
  document.getElementById('root')
);

2.2 浏览器的fetch请求

• 使用假数据接口http://jsonplaceholder.typicode.com/
• 思路:
  • 创建组件
  • 暴露组件
  • 引入组件
  • 使用组件
  • 发送请求
  • fetch 需要两次then
    
• fetch.js

import React,{Component} from 'react'

export default class Fetch extends Component{
    constructor() {
        super();
    }
    componentDidMount() {
        fetch('http://jsonplaceholder.typicode.com/todos').then(res=>res.json()).then(res=>{
            console.log(res)
        })
    }

    render() {
        return(
            <div>
                Fetch
            </div>
        )
    }
}

• APP.js

import React,{Component} from 'react'
import {Axios,Fetch} from './component/index'
export default class APP extends Component{
    constructor() {
        super();
    }
    render() {
        return(
            <div>APP
                <Fetch/>
            </div>
        )
    }
}

2.3 axios请求

• 安装依赖cnpm i axios -S
• 引进依赖 import axios from 'axios '
• 使用依赖axios.get('')

2.3.1 基本请求

• axios.js

import React,{Component} from 'react'
import axios from 'axios'
export default class Axios extends Component{
    constructor() {
        super();
    }
    componentDidMount() {
        axios.get('http://jsonplaceholder.typicode.com/todos').then(res=>{
            console.log(res)
        })
    }

    render() {
        return(
            <div>
                axios
            </div>
        )
    }
}

• APP.js

import React,{Component} from 'react'
import {Axios,Fetch} from './component/index'
export default class APP extends Component{
    constructor() {
        super();
    }
    render() {
        return(
            <div>APP
                <Axios/>
            </div>
        )
    }
}

2.3.2 基本封装请求两种

1 基本式封装

1 创建API文件夹/index.js
2 暴露请求 index.js 中 import './API'

• axios.js

import React,{Component} from 'react'
export default class Axios extends Component{
    constructor() {
        super();
    }
    componentDidMount() {
        this.$http.get('/todos').then(res=>{
            console.log(res)
        })
    }

    render() {
        return(
            <div>
                axios
            </div>
        )
    }
}

• API/index.js

import axios from "axios";
import React from 'react'
axios.defaults.baseURL='http://jsonplaceholder.typicode.com'
React.Component.prototype.$http = axios

2 创建式封装

• API/index.js

import axios from "axios";
import React from 'react'
const http= axios.create({
    baseURL:'http://jsonplaceholder.typicode.com'
})
React.Component.prototype.$http = http

2.3.3 基本封装的请求拦截

1 基本式封装的请求拦截

• index.js

import axios from "axios";
import React from 'react'
axios.defaults.baseURL='http://jsonplaceholder.typicode.com'
axios.interceptors.request.use(function (config){
    console.log(1)
   return config
},function (error){
    return Promise.reject(error)
})
React.Component.prototype.$http = axios

2 创建式封装的请求拦截

• index.js

import axios from "axios";
import React from 'react'
const http= axios.create({
    baseURL:'http://jsonplaceholder.typicode.com'
})
http.interceptors.request.use(function (config){
    console.log(1)
    return config
},function (error){
    return Promise.reject(error)
})
React.Component.prototype.$http = http

2.3.4 post请求封装拦截QS

• 使用qs 依赖,主要处理post请求
  • qs 依赖可以将对象转换为字符串
  • qs依赖可以将字符串转换为字符串
  • 后端开发,按需要来
  • 后端为node时,可以app.use(express.json())
  • 后端为java时,前端可以使用qs处理

0 项目结构

1 编写测试接口

• 1 创建server 文件夹

• 2 初始化文件夹npm init -y

• 3 使用依赖express

  • 执行命令cnpm i express -S
  • 编写app.js文件

• 4 启动服务nodemon app.js

• app.js文件

const  express = require('express')
const app = express()

app.use(express.urlencoded({extended:false}))// 处理地址数据
app.post('/todos',(req, res) => {
    console.log(req.body)
})
app.listen(3000,()=>{
    console.log('服务启动')
})

2 编写请求API

• 安装依赖qs cnpm i qs -S

• 编写API/index.js

• index.js

import axios from "axios";
import React from 'react'
import qs from 'qs'
const http= axios.create({
    baseURL:'http://127.0.0.1:3000'
})
http.interceptors.request.use(function (config){
    if(config.method==='post'){
        config.data=qs.stringify(config.data)
    }
    return config
},function (error){
    return Promise.reject(error)
})
React.Component.prototype.$http = http

• axios.js

import React,{Component} from 'react'
export default class Axios extends Component{
    constructor() {
        super();
    }
    componentDidMount() {
        this.$http.post('/todos',{id:1,name:'lay'}).then(res=>{
            console.log(res)
        })
    }

    render() {
        return(
            <div>
                axios
            </div>
        )
    }
}