关于javascript:AXIOS

Axios

基于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默认配置

对反复配置的编写

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

Axios

搭建环境

根本应用

其余应用

axios默认配置

axios拦截器