前端学习七（前后端数据交互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>
    
    <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>

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

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

三、实例化请求对象

四、get请求参数传递方式

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

六、axios结合async、await的使用

七、练习

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js">script>
        <script src="https://unpkg.com/axios/dist/axios.min.js">script>
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <script src="https://unpkg.com/element-ui/lib/index.js">script>
        <style type="text/css">
            body {
                background: url(lol.jpeg);
            }

            .box-card {
                width: 400px;
                margin: auto;
                margin-top: 200px;
                text-align: center;
                background-color: rgba(0, 0, 0, 20%);
                border: 0rem;
            }

            .el-input {
                padding: 8px;
            }
        style>
    head>
    <body>
        <div id="app">
            <el-card class="box-card">
                <h4>欢迎来到英雄联盟h4>
                <el-input v-model="loginData.usr" placeholder="请输入账号">el-input>
                <el-input v-model="loginData.pwd" placeholder="请输入密码" type="password">el-input>
                <el-button type="primary" style="margin-top: 10px;" @click="login()">登录el-button>
            el-card>

        div>
        <script type="text/javascript">
            const instance = axios.create({
                baseURL: 'http://127.0.0.1:5000',
                timeout: 1000,
            });

            var vue = new Vue({
                el: "#app",
                data: {
                    loginData: {
                        usr: "",
                        pwd: ""
                    }
                },
                methods: {
                    async login() {
                        try {
                            const rsp = await instance.post("/api/user/login", {
                                user: this.loginData.usr,
                                pwd: this.loginData.pwd
                            })
                        } catch (e) {
                            alert("网络异常")
                        }
                        console.log(rsp);
                        if (rsp.data.code == '1') {
                            const token = rsp.data.token;
                            console.log("获取token成功", token);
                            window.sessionStorage.setItem("token", token)
                        } else {
                            alert("登录失败")
                        }
                    }
                }
            })
        script>
    body>
html>