关于javascript:AXIOS

5次阅读

共计 2668 个字符，预计需要花费 7 分钟才能阅读完成。

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

特点：

在浏览器端发送 Ajax 申请
在 node.js 中发送 http 申请
反对 Promise 的相干操作
申请响应拦截器
对申请响应和数据转化
勾销申请
主动转化 json 数据
对跨站攻打进行爱护

搭建环境
首先在电脑装置 node.js
关上编辑器（vscode）创立 json-server 目录，并在此目录下创立 db.json 文件

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

申请拦截器：在发送申请之前，借助一些函数对申请的参数和内容做一些解决和检测，没问题就发，有问题就进行和勾销。

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

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

正文完