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