超级详细react笔记(八)axios请求篇

文章目录1 引入2 请求2.1 项目结构2.1.1 文件如下2.2 浏览器的fetch请求2.3 axios请求2.3.1 基本请求2.3.2 基本封装请求两种1 基本式封装2 创建式封装2.3.3 基本封装的请求拦截1 基本式封装的请求拦截2 创建式封装的请求拦截2.3.4 post请求封装拦截QS0 项目结构1 编写测试接口2 编写请求API1 引入在学请求时需要先了解一下react的生命周期

laker Zhang

372人浏览 · 2020-11-05 20:24:19

laker Zhang · 2020-11-05 20:24:19 发布

文章目录

1 引入
2 请求

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