初识react（9）——实现 axios 的封装使用

待我称王封你为后i 2023-05-21 11:55 10阅读 0赞

**  在搭建好react脚手架项目后（[使用脚手架搭建项目的博客][Link 1]），我们经常会使用axios 发送请求与后端交互，下面是关于 axios 的使用的内容。**

**先安装axios：**

npm install axios --save

**在 src 目录下新建一个 server.js 的文件，代码如下：**

import axios from 'axios'
    import qs from 'qs'
    import { message} from 'antd';
    
    //对 get post方法 进行封装
    let http = { 
        post:"",
        get:""
    };
    axios.defaults.baseURL = '/api';
    http.post=function (api,data) { 
        let params = qs.stringify(data);
        //执行器
        return new Promise((resolve,reject)=>{ 
            //1、执行异步ajax请求
            axios.post(api,params)
                .then((res)=>{ 
                //2、成功了调用resolve(value)
                resolve(res)
            })
                //3、如果失败了提示异常信息
                .catch(function(error){ 
                    message.error("请求出错："+error.message);
                })
    
        })
    };
    
    http.get=function (api,data) { 
        let params = qs.stringify(data);
        return new Promise((resolve,reject)=>{ 
            axios.get(api,params)
                .then((res)=>{ 
                resolve(res)
            })
                .catch(function(error){ 
                    message.error("请求出错："+error.message);
                })
        })
    };
    
    export default http

**在react组件上使用 axios ：**

import http from "../../server"  //引入

async getList(){         
            const res = await http.post('/login',{ 
                userName:'xxx',           
                password:'123456'
            })
            console.log(res)
        }

**根据你的接口和要传参数自行更改其中部分代码。**

[Link 1]: https://blog.csdn.net/qq_43652492/article/details/104944194