axios初入门 - 技术栈

1,axiox的基本使用

html 复制代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>axios基本使用</title>
    <link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body>
<div class="container">
    <h2 class="page-header">基本使用</h2>
    <button class="btn btn-primary"> 发送GET请求 </button>
    <button class="btn btn-warning" > 发送POST请求 </button>
    <button class="btn btn-success"> 发送 PUT 请求 </button>
    <button class="btn btn-danger"> 发送 DELETE 请求 </button>
</div>
<script>
    //获取按钮
    const btns = document.querySelectorAll('button');

    //第一个
    btns[0].onclick = function(){
        //发送 AJAX 请求
        axios({
            //请求类型
            method: 'GET',
            //URL
            url: 'http://localhost:3000/posts/2',
        }).then(response => {
            console.log(response);
        });
    }

    //添加一篇新的文章
    btns[1].onclick = function(){
        //发送 AJAX 请求
        axios({
            //请求类型
            method: 'POST',
            //URL
            url: 'http://localhost:3000/posts',
            //设置请求体
            data: {
                title: "今天天气不错, 还挺风和日丽的",
                author: "张三"
            }
        }).then(response => {
            console.log(response);
        });
    }

    //更新数据
    btns[2].onclick = function(){
        //发送 AJAX 请求
        axios({
            //请求类型
            method: 'PUT',
            //URL
            url: 'http://localhost:3000/posts/3',
            //设置请求体
            data: {
                title: "今天天气不错, 还挺风和日丽的",
                author: "李四"
            }
        }).then(response => {
            console.log(response);
        });
    }

    //删除数据
    btns[3].onclick = function(){
        //发送 AJAX 请求
        axios({
            //请求类型
            method: 'delete',
            //URL
            url: 'http://localhost:3000/posts/3',
        }).then(response => {
            console.log(response);
        });
    }

</script>
</body>

</html>

2,默认配置

html 复制代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>axios基本使用</title>
    <link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body>
    <div class="container">
        <h2 class="page-header">基本使用</h2>
        <button class="btn btn-primary"> 发送GET请求 </button>
    </div>
    <script>
        //获取按钮
        const btns = document.querySelectorAll('button');
        //默认配置
        axios.defaults.method = 'GET';//设置默认的请求类型为 GET
        axios.defaults.baseURL = 'http://localhost:3000';//设置基础 URL
        axios.defaults.params = {id:100};
        axios.defaults.timeout = 3000;//

        btns[0].onclick = function(){
            axios({
                url: '/posts'
            }).then(response => {
                console.log(response);
            })
        }

    </script>
</body>

</html>

3,设置拦截器

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="axios.js"></script>
</head>
<body>
<script>
    //设置请求拦截器
    axios.interceptors.request.use(function (config) {
        console.log("请求拦截成功")
        config.params={a:100}
        return config
    },function (error) {
        return Promise.reject(error)
    })
    //设置响应
    axios.interceptors.response.use(function (response) {
        console.log("响应成功")
        return response.data;
    },function (error) {
        console.log("响应器拦截失败 失败1号")
        return Promise.reject(error)
    })
    //发送请示
    axios({
        method:"GET",
        url:"http://localhost:3000/posts"
    }).then(response=>{
        console.log("自定义回调处理成功的结果")
        console.log(response)
    })
</script>

</body>
</html>

4,取消请求

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link crossorigin='anonymous' href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body>
    <div class="container">
        <h2 class="page-header">axios取消请求</h2>
        <button class="btn btn-primary"> 发送请求 </button>
        <button class="btn btn-warning" > 取消请求 </button>
    </div>
    <script>
        //取消按钮
        const btns = document.querySelectorAll('button')
        //2,声明全局变量
        let cancel = null;
        btns[0].onclick=function () {
            if(cancel!==null){
                cancel()
            }
        }
        axios({
            method:"GET",
            url:"http://localhost:3000/posts",
            cancelToken:new axios.cancelToken(function (c) {
                cancel=c;
            })
        }).then(response=>{
            console.log(response)
            cancel=null
        })
        //绑定第二个事件取消请求
        btns[1].onclick=function () {
            cancel();
        }


    </script>
</body>
</html>

5,axios的二次封装

未完待继...