前后端数据交互axios

2021/11/14 23:11:37

编程Tag： 请求 axios 交互 console log Instance rsp 前后

本文主要是介绍前后端数据交互axios，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

axios官网：http://www.axios-js.com/zh-cn/docs/index.html#axios-request-config-1

一、axios请求和简写

一定要引入请求库aioxs

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 引入前端的请求库axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <script>
        // axios发送的是异步请求，返回的Promise是异步对象
        const rsp = axios.get("http://127.0.0.1:5000/api/projects")
        // 可以通过回调函数获取response对象
        rsp.then((result) => {
            console.log(result);
        })
        
        // 简写
        axios.get("http://127.0.0.1:5000/api/projects1").then((rsp) => {
            console.log(rsp);
            console.log(rsp.status);
            console.log(rsp.data);
        }).catch((error)=>{
            // 响应码是3、4、5会走这个步骤
            console.log(error);
        })
    </script>
</body>
</html>

View Code

二、自定义状态码错误范围

    <script>
        axios.get("http://127.0.0.1:5000/api/projects1",
            {
                validateStatus: function (status) {
                    return status<500
                }
            }
        ).then((rsp) => {
            console.log(rsp);
            console.log(rsp.status);
            console.log(rsp.data);
        })
        // .catch((error) => {
        //     // 响应码是3、4、5会走这个步骤
        //     console.log(error);
        // })
    </script>

View Code

三、实例化请求对象

    <script>
        // 创建请求对象
        const instance = axios.create({
            baseURL: 'http://127.0.0.1:5000',
            timeout: 1000,
            // 添加请求头
            headers: { 'X-Custom-Header': 'foobar' },
            // 指定http状态码错误范围
            validateStatus: function (status) {
                return status < 500
            }

        });
        // 进行请求
        instance.get("/api/projects").then((rsp) => {
            console.log(rsp);
            console.log(rsp.status);
            console.log(rsp.data);
        })
    </script>

四、get请求参数传递方式

<script>
        // 创建请求对象
        const instance = axios.create({
            baseURL: 'http://127.0.0.1:5000',
            timeout: 1000,
            // 添加请求头
            headers: { 'X-Custom-Header': 'foobar' },
            // 指定http状态码错误范围
            validateStatus: function (status) {
                return true
            }

        });
        // 参数传递方式1
        instance.get("/api/interface?id=1001").then((rsp) => {
            console.log(rsp.data);
        })

        // 参数传递方式2
        instance.get("/api/interface", {
            params: {
                id: 1002
            }
        }).then((rsp) => {
            console.log(rsp.data);
        })
    </script>

View Code

五、post请求参数传递方式（表单、json）

 <script>
        // 创建请求对象
        const instance = axios.create({
            baseURL: 'http://127.0.0.1:5000',
            timeout: 1000,
            // 添加请求头
            headers: { 'X-Custom-Header': 'foobar' },
            // 指定http状态码错误范围
            validateStatus: function (status) {
                return true
            }

        });
        // 参数传递,json
        instance.post("/api/user/login", {
            user: "python01",
            pwd: "lemonban"
        }).then((rsp) => {
            console.log('json传递的返回',rsp);
        }).catch((err) => {
            console.log(err);
        });

        // 参数传递,表单
        // 先创建表单对象
        const params = new URLSearchParams()
        params.append("user", "python01")
        params.append("pwd", "lemonban")
        instance.post("/api/user/login", params).then((rsp) => {
            console.log('表单传递的返回',rsp);
        }).catch((err) => {
            console.log(err);
        });
    </script>

View Code

六、axios结合async、await的使用

 <script>
        // 创建请求对象
        const instance = axios.create({
            baseURL: 'http://127.0.0.1:5000',
            timeout: 1000,
            // 添加请求头
            headers: { 'X-Custom-Header': 'foobar' },
            // 指定http状态码错误范围
            validateStatus: function (status) {
                return true
            }

        });

        // 添加请求拦截器
        instance.interceptors.request.use(function (config) {
            // 在发送请求之前做些什么
            // 获取sessioStorage中的token，并添加到请求头或者请求体中
            const token = window.sessionStorage.getItem("token")
            if (token) {
                config.headers.Mytoken = token
            }
            return config;
        }, function (error) {
            // 对请求错误做些什么
            return Promise.reject(error);
        });

        // async和await结合axios使用
        async function login() {
            // 不加await会返回一个异步的对象；await只能在异步函数中使用
            const rsp = await instance.post("/api/user/login", { user: "python01", pwd: "lemonban" })
            console.log(rsp);
            if (rsp.data.code == '1') {
                const token = rsp.data.token;
                console.log("获取token成功", token);
                // 将token存储到sessioStorage（会话级别存储）
                window.sessionStorage.setItem("token", token)
            } else {
                console.log("登录失败");
            }
        }

        async function demo() {
            const rsp = await instance.get("/api/interface?id=1001")
            console.log("get请求", rsp);
        }

        login()
        demo()

        // 添加响应拦截器
        instance.interceptors.response.use(function (response) {
            // 对响应数据做点什么
            // 直接获取响应的data数据
            return response.data;
        }, function (error) {
            // 对响应错误做点什么
            return Promise.reject(error);
        });
        // 验证是否真的拿的是data数据
        demo()
    </script>

七、练习

这篇关于前后端数据交互axios的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

前后端数据交互axios

相关编程文章