关于javascript:AXIOS

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