05-AXIOS

入门案例

• 入门步骤：https://github.com/typicode/json-server

1、创建一个 json-server 文件夹，并安装 软件包

npm install -g json-server

2、在文件夹下创建 db.json 文件

{
    "posts": [
        {
            "id": 1,
            "title": "json-server",
            "author": "typicode"
        }
    ],
    "comments": [
        {
            "id": 1,
            "body": "some comment",
            "postId": 1
        }
    ],
    "profile": {
        "name": "typicode"
    }
}

3、启动服务

npx json-server --watch db.json

4、引入axios

• 可以通过https://www.bootcdn.cn 提高访问的速度

<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.5/axios.js"></script>

5、测试

<script>
        let btns = document.querySelectorAll('button');
        btns[0].addEventListener('click', () => {
            axios({
                method: 'GET',
                url: 'http://localhost:3000/posts'
            }).then(response => {
                console.log(response);
            })
        })

        btns[1].addEventListener('click', () => {
            axios({
                method: 'POST',
                url: 'http://localhost:3000/posts',
                data: {
                    "title": "robber",
                    "author": "typicode"
                }

            })
        })

        btns[2].addEventListener('click', () => {
            axios({
                method: 'PUT',
                url: 'http://localhost:3000/posts/2',
                data: {
                    "id": "2",
                    "title": "lkasdjfkljaskdlfjkl",
                    "author": "typicode"
                }
            })
        })

        btns[3].addEventListener('click', () => {
            axios({
                method: 'delete',
                url: 'http://localhost:3000/posts/2'
            }).then(response => {
                console.log(response);
            })
        })
    </script>s

axios 使用

常用语法

1、axios.request(config): 等同于 axios(config)

2、axios.get(url[, config]): 发 get 请求

3、axios.delete(url[, config]): 发 delete 请求

4、axios.post(url[, data, config]): 发 post 请求

axios.request(config): 等同于 axios(config)

btns[0].addEventListener('click', () => {
    axios.request({
        method: 'GET',
        url: 'http://localhost:3000/comments/1'
    }).then(response => {
        console.log(response);
    })
})

axios.post(url[, data, config]): 发 post 请求

btns[1].addEventListener('click', () => {
    axios.post(
        'http://localhost:3000/comments',
        {
            "body": "asdfasdfasdfsome comment",
            "postId": 2
        }).then(response => {
            console.log(response);
        })
})

默认设置

axios.defaults.method = 'GET'; //设置默认请求方式
        axios.defaults.baseURL = 'http://localhost:3000/comments'; //设置基础路径
        axios.defaults.params = { id: 100 }; //设置默认请求url参数
        btns[0].addEventListener('click', () => {
            axios.request({
                method: 'GET',
                url: '/1'
            }).then(response => {
                console.log(response);
            })
        })

创建实例对象发送请求

let btns = document.querySelectorAll('button');
let duanzi = axios.create({
    beaseURL: 'http://localhost:3000',
    timeout: 2000
});

duanzi({
    url: '/comments/1'
}).then(response => {
    console.log(response);
})

请求拦截器

<script>
    let btns = document.querySelectorAll('button');

    //设置请求拦截器
    axios.interceptors.request.use(function (config) {
        console.log('请求拦截器成功')
        return config;
    }, function (error) {
        console.log('请求拦截器失败');
        return Promise.reject(error);
    });

    //设置响应拦截器
    axios.interceptors.response.use(function (response) {
        console.log('响应拦截器成功');
        return response;
    }, function (error) {
        console.log('响应拦截器失败');
        return Promise.reject(error);
    });

    //设置操作
    axios({
        method: 'GET',
        url: 'http://localhost:3000/comments/1'
    }).then(respone => {
        console.log(respone.data);
    })

</script>

取消请求

<script>
    let btns = document.querySelectorAll('button');

    //临时变量
    let cancel = null;
    btns[0].addEventListener('click', () => {
        //用户已经点击则直接取消
        if (cancel !== null) {
            cancel();
        }
        axios({
            method: 'GET',
            url: 'http://localhost:3000/posts/1',
            //添加配置对象的属性
            cancelToken: new axios.CancelToken(function (c) {
                cancel = c;
            })
        }).then(response => {
            console.log(response);
            cancel = null;
        })

    })

    btns[1].addEventListener('click', () => {
        console.log(cancel());
    })
</script>