React axios使用

目录

一：什么是axios?

二：axios可以发起那些请求？

三： 在React项目中如何配置axios?

1：安装axios模块

2: 在request.js中引入axios并配置

3: 接受请收发起请求

 4:请求数据GET

 5:POST请求

6：PUT请求

7:DELETE请求

---

一：什么是axios?

axios是一个基于Promise的HTTP库，可以用在浏览器和node.js中。

二：axios可以发起那些请求？

GET POST PUT DELETE PATCH

三： 在React项目中如何配置axios?

1：安装axios模块

npm i axios --save

2: 在request.js中引入axios并配置

import aioxs from 'axios'


var request = axios.create({
    // 后台接口的基准地址
    baseURL:"http://127.0.0.1:8000/",
    timeout:5000
})

// 添加请求拦截器
request.interceptors.request.use((config) => {
    return config
}, function (error) {
    //对相应错误做点什么
    return Promise.reject(error)
}
)



//拦截器响应
request.interceptors.response.use((response) => {
    return response
}, function (error) {
    //对相应错误做点什么
    return Promise.reject(error)
}
)

export default request

3: 接受请收发起请求

import request from '../utils/request'


export function getNewsList(url, method, data) {
    return request({
        url: url,
        method: method,
        params: data
    })
}

 4:请求数据GET

//将封装好的axios请求引入
import getNewList from '../../api/NewsList'


export default class New extends Component {
     constructor(props) {
        super(props)
        this.state = {
            list: [],
            yit: 0,
            weit: 0,
            huit: 0,
        }
    }

        //加载页面时调用首次调用
        componentDidMount() {
        // 请求服务器
        this.gengxin()
    }    
        //请求全部数据get
       async gengxin() {
        var msg = await getNewsList('Contens/', 'get')
        console.log(msg, 'msgmsg');
        if (msg.data.code == 200) {
            this.setState({ list: msg.data.list, weit: msg.data.weit, yit: msg.data.yit, huit: msg.data.huit })
            console.log(this.state.list, 'llll');
        }
    }


    render(){
    



}



}

 5:POST请求

可以每一个请求都写一个基准地址，请求方法，请求参数

    over(id) {
        axios.put('http://127.0.0.1:8000/Contens/', {
            id: id,
            status: 1
        }).then((msg) => {
            console.log(msg);


        })
        this.gengxin()
        this.wd()
    }

但是我们封装了 ， 可以直接简写

例如：

  async addOk() {
        let msg = await getStuList("Student/", "post",
            this.state.addStu
        )
        console.log(msg, 'tttttttt');
        if (msg.data.code == 200) {
            message.success('添加成功');
            this.getStu()
        }
        this.setState({ tj: !this.state.tj })

    }

 

6：PUT请求

async xg(){

    let msg = await getNewList("Student/",'put',this.state.edtiStu)

         console.log(msg, 'xxxxxxxxxxxx');
        if (msg.data.code == 200) {
            message.success('修改成功');

            this.setState({ edit: !this.state.edit })
        }
        this.getStu()
}

7:DELETE请求

   //删除
    async del(id) {
        // console.log(id);
        let msg = await getStuList('Student', 'delete', {
            id: id
        })
        if (msg.data.code == 200) {
            message.success('删除成功');
        }

        console.log(msg, 'sssssssss');
        this.getStu()

    }