axios

axios是前端最流行的ajax请求库

1. json-server介绍和服务搭建（前置知识）

json-server可以快速搭建一个http服务，可以替我们完成完全模拟请求以及请求回来的过程的工具。只需要提供一个json文件，或者写几行简单的js脚本就可以模拟出RESTful API的接口。
使用：

1.安装：npm install -g json-server
2.创建db.json 在一个文件夹下新建一个db.json文件
3.启动json-server 在当前文件夹下输入如下命令： json-server db.json（这里启动的工作目录一定要在db.json文件所在的文件夹下）

2. axios介绍

1.基于 xhr + promise 的异步 ajax 请求库
2.浏览器端、node端都可以使用
3.支持请求／响应拦截器、支持请求取消
4.请求/响应数据转换、自动将结果转化为json数据
5.批量发送多个请求
6.阻挡跨站攻击
axios文档

基本使用：

        btns[0].onclick=function(){
            axios({
                // 请求类型
                method:'GET',
                url:'http://localhost:3000/posts/2',
            }).then(res=>{
                console.log(res);
            })
        };

3. axios常用语法

config配置项(包括请求方法、请求对象、请求体等)

1.axios(config):通用/最本质的发任意类型请求的方式，等同于axios.request(config)
2.axios(url , configl):可以只指定url发get请求
3.axios.get(urlL , configl):发get请求
4.axios.delete(urll , configl):发delete请求5.axios.post(url, data, config):发post请求6.axios.put(url , data , configl):发put请求

8.axios.defaults.xxx:请求的默认全局配置9.axios.interceptors.request.use():添加请求拦截器10.axios.interceptors.response.use():添加响应拦截器
11.axios.create(configl):创建一个新的axios(它没有下面的功能)
12.axios.Cancel():用于创建取消请求的错误对象13.axios.CancelToken():用于创建取消请求的token对象
14.axios.isCancel():是否是一个取消请求的错误15.axios.all(promises):用于批量执行多个异步请求16.axios.spread():用来指定接收所有成功数据的回调函数的方法

4. 默认配置

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

5. 创建实例对象发送ajax请求

axios.create(config)

(1) 场景: 处理项目中有部分接口需要的配置与另一部分接口需要的配置不太一样
(2) 解决: 创建 2 个新 axios, 每个都有自己特有的配置, 分别应用到不同要求的接口请求中（需要给哪个域名发送请求就直接调用相应的实例对象）

 //创建实例对象  /getJoke
   const duanzi = axios.create({
     baseURL: 'https://api.apiopen.top',
     timeout: 2000
   });
   const another = axios.create({
     baseURL: 'https://b.com',
     timeout: 2000
   });
   //这里  duanzi 与 axios 对象的功能几近是一样的
   // duanzi({
   //     url: '/getJoke',
   // }).then(response => {
   //     console.log(response);
   // });
   //也使用封装好的方法发送请求
   duanzi.get('/getJoke').then(response => {
     console.log(response.data)
   })

6. axios拦截器

拦截器是一个函数，分为两大类：1.请求拦截器、2.响应拦截器
作用：在请求和响应前通过回调对请求和响应的内容进行处理和校验

流程: 请求拦截器2 => 请求拦截器1 => 发ajax请求 => 响应拦截器1 => 响应拦截器 2 => 请求的回调

流程是通过 promise 串连起来的, 请求拦截器传递的是 config, 响应拦截器传递的是 response

// 设置请求拦截器
        axios.interceptors.request.use(function (config) {
            console.log("请求拦截器成功-1");
            // 修改config中的参数
            config.params={a:100};
            return config;
        }, function (error) {
            console.log("请求拦截器失败-1");
            return Promise.reject(error);
        });
        axios.interceptors.request.use(function (config) {
            console.log("请求拦截器成功-2");
            // 修改config中的值
            config.outtime=2000;
            return config;
        }, function (error) {
            console.log("请求拦截器失败-2");
            return Promise.reject(error);
        });

// 设置响应拦截器
        axios.interceptors.response.use(function (response) {
            console.log("响应拦截器成功-1");
            // return response;
            return response.data;
        }, function (error) {
            console.log("响应拦截器成功-1");
            return Promise.reject(error);
        });
        axios.interceptors.response.use(function (response) {
            console.log("响应拦截器成功-2");
            return response;
        }, function (error) {
            console.log("响应拦截器成功-2");
            return Promise.reject(error);
        });
// 发送请求
        axios({
            method:'POST',
            url:'http://localhost:3000/posts',
        }).then(response=>{
            console.log('自定义回调处理成功的结果');
        }).catch(reason=>{
            console.log('自定义失败回调');
        })
    </script>

7. axios取消请求

节流：n秒内只生效一次
防抖：（简单理解：下个操作中断上一个，类似王者荣耀回城被打断再回城，时间重新计算）

	<button>发送请求</button>
    <button>取消请求</button>
    <script>
        const btns=document.querySelectorAll('button');
        btns[0].onclick=function(){
            // 判断上一个请求是否结束，如果没有就取消
            if(cancel!==null){
                cancel();
            }
            let cancel=null;
            axios({
                method:'GET',
                url:'http://localhost:3000/posts',
                cancelToken:new axios.cancelToken(function(e){
                    cancel=e;
                })
            }).then(res=>{
                console.log(res);
                cancel=null;// 请求结束就把cancel复原为null
            })
        }
        btns[1].onclick=function(){
            cancel();//取消请求
        }
    </script>

axios源码

axios 与 Axios 的关系

从语法上来说: axios 不是 Axios 的实例
从功能上来说: axios 是 Axios 的实例
axios 是 Axios.prototype.request 函数 bind()返回的函数
axios 作为对象有 Axios 原型对象上的所有方法, 有 Axios 对象上所有属性

instance与axios的区别

instance是通过create方法创建出来的实例