axios

零、json-server服务器搭建

一、axios包：bootcdn搜索axios

二、四种请求
GET
POST
PUT
DELETE

            // 获取按钮
             const btns = document.querySelectorAll('button')
            // GET请求，获取某一数据
            // 给第一个按钮绑定事件
            btns[0].onclick =function(){
                // 发送AJAX请求
                axios({
                    // 请求类型
                    method:'GET',
                    // 获取post内第二条数据
                    url:'http://localhost:3000/posts/2'
                }).then(Response =>{
                   console.log(Response); 
                });
            }
            // POST请求，向posts内添加
            btns[1].onclick =function(){
                axios({
                    method:'POST',
                    url:'http://localhost:3000/posts',
                    // 设置请求体
                    data:{
                        title:"x",
                        author:"m"
                    }
                }).then(Response =>{
                   console.log(Response); 
                });
            }
             //PUT请求，更新posts内第三条数据
             btns[2].onclick =function(){
                axios({
                    method:'PUT',
                    url:'http://localhost:3000/posts/3',
                    // 设置请求体
                    data:{
                        title:"sb",
                        author:"nc"
                    }
                }).then(Response =>{
                   console.log(Response); 
                });
            }
             //DELETE请求，删除posts内第二条数据
             btns[3].onclick =function(){
                axios({
                    method:'DELETE',
                    url:'http://localhost:3000/posts/2',
                }).then(Response =>{
                   console.log(Response); 
                });
            }

五、配置对象

高频常用参数罗列：
	1：url       //  通过设置url参数，决定请求到底发送给谁
	2：method    // 设置请求的类型，get/post/delete..
	3：baseURL   // 设置url的基础结构，发送请求配置时只需要设置url即可，axios会自动将两者进行拼接
	4：headers   // 头信息：比较实用的参数，在某些项目当中，进行身份校验的时候，要求在头信息中加入一个特殊的			   标识  // 来检验请求是否满足要求，可以借助headers对请求头信息做一个配置
	5：params    // 也是一个比较常用的参数，来设定url参数的，直接加在url后面
	6：data     
	7：timeout    // 超时请求时间，单位是ms 超过请求时间，请求就会被取消

六、默认配置

            const btns = document.querySelectorAll('button')
            // 默认配置
            axios.defaults.method = 'GET';//设置默认请求类型为GET
            axios.defaults.baseURL = 'http://localhost:3000';//设置基础地址
            axios.defaults.timeout = 3000;
            // 发送AJAX请求
            btns[0].onclick =function(){
                axios({
                    url:'/posts/1'
                }).then(Response =>{
                   console.log(Response); 
                });
            }

七、创建实例对象

八、拦截器

 axios.interceptors.request.use(function(config){
                console.log('请求拦截器 成功');
                return config;
            },function(error){
                console.log('请求拦截器 失败');
                return Promise.reject(error);
            })
            axios.interceptors.request.use(function(Response){
                console.log('响应拦截器 成功');
                return Response;
            },function(error){
                console.log('响应拦截器 失败');
                return Promise.reject(error);
            })
            // 发送AJAX请求
            axios({
                method:'GET',
                url:'http://localhost:3000/posts'
            }).then(Response => {
                console.log(Response)
            })

九、取消

            // 获取按钮
            const btns = document.querySelectorAll('button')
            // 2.声明全局变量
            let cancel =null;
           btns[0].onclick =function(){
                axios({
                    method:'GET',
                    url:'http://localhost:3000/posts',
                    // 1.添加配置对象的属性
                    cancelToken: new axios.CancelToken(function(c){
                        // 3.把c赋值给cancel
                        cancel = c;
                    })
                }).then(Response =>{
                   console.log(Response); 
                });
            }
            // 4.绑定取消请求事件
            btns[1].onclick = function(){
                cancel();
            }