AXIOS

Posted 2021-09-07 HUMILITY

Axios

基于Promise的htt客户端，可以在浏览器和node.js环境中运行

特点：

1. 在浏览器端发送Ajax请求
2. 在node.js中发送http请求
3. 支持Promise的相关操作
4. 请求响应拦截器
5. 对请求响应和数据转化
6. 取消请求
7. 自动转化json数据

8. 对跨站攻击进行保护

   搭建环境

9. 首先在电脑安装node.js
10. 打开编辑器（vscode）创建json-server目录，并在此目录下创建 db.json 文件

11. 打开vscode命令终端

    • 输入： npm install -g json-server （回车安装）

    • 在db.json内输入一些数据如：

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

      • 在db.json文件（重要）控制终端下 输入 json-server
      • 完成

基本使用

基于搭建好相关环境并且在script标签内运行
GET POST PUT DELETE

GET

<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 => {
            (response);
        })
    }

POST

    btns[1].onclick = function() {
        axios({
            //发送post请求
            method: \'POST\',
            url: \'http://127.0.0.1:3000/posts\',
            //设置请求体
            data: {
                title: "学习冲冲冲，我爱学习",
                author: "麻子"
            }
        }).then(response => {
            console.log(response);
        })
    }

PUT

    //更新数据
    btns[2].onclick = function() {
            axios({
                //发送PUT请求.PUT需要传id
                method: \'PUT\',
                url: \'http://127.0.0.1:3000/posts/3\',
                //设置请求体
                data: {
                    title: "学习冲冲冲，我爱学习",
                    author: "里斯"
                }
            }).then(response => {
                console.log(response);
            })
        }

DELETE

        //删除数据
    btns[3].onclick = function() {
        axios({
            //发送delete请求
            method: \'delete\',
            url: \'http://127.0.0.1:3000/posts/3\',
            //设置请求体
        }).then(response => {
            console.log(response);
        })
    }
</script>

其他使用

  //get buutons
    const btns = document.querySelectorAll(\'button\')
        //发送get请求
    btns[0].onclick = function() {
        //axios()
        axios.request({
            method: \'GET\',
            url: \'http://localhost:3000/comments\'

        }).then(response => {
            console.log(response);
        })
    }
    btns[1].onclick = function() {
        //axios() 发送post请求
        axios.post(
            \'http://localhost:3000/comments\', {
                "body": "sker,haahah",
                "postId": 2
            }).then(response => {
            console.log(response);
        })
    }
    

axios默认配置

对重复配置的编写

    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);
        })
    }
    

axios拦截器

请求拦截器：在发送请求之前，借助一些函数对请求的参数和内容做一些处理和检测，没问题就发，有问题就停止和取消。

响应拦截器：当服务器返回结果后，在处理结果前进行预处理，没问题再交由自定义处理，有问题在响应拦截器处理。

            //Promise
            // 设置请求拦截器
            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\'
            }).then(response => {
                console.log(response);
            })