axios学习总结

目录

一、前言

二、axios 发送请求的方式(重要)

方式一:直接使用

 方式二:使用request方法 ,使用方式和直接使用一致

 方式三 、通过已经封装好的方法发送

 三、响应结果,服务端返回的数据

四、axios配置对象

  五、axios默认设置(重要)

 六、创建实例对象发送axios请求(重要)

七、拦截器(重要)

八、axios取消请求


一、前言
 

axios作用:用于web页面和服务器端数据的访问与传输。

二、axios 发送请求的方式(重要)

方式一:直接使用

     axios({
                //请求类型
                method: 'GET',
                //Url
                url: ' http://localhost:3000/posts/2',
                
                //发送给服务端的数据 key: "value" ,或者 "key" : "value"  单双引号都没问题
             data: {
                    title:"今天天气好",
                    author: "张三",
                }

            }).then(response=>{
                //回调 获取服务端返回的数据
                console.log(response);
                
            });

        then :自定义成功的回调函数;
        catch:自定义失败的回调函数

 方式二:使用request方法 ,使用方式和直接使用一致


                //请求
        but1[0].onclick=function(){
            axios.request({
                method:'POST',
                url: 'http://localhost:3000/posts',
                data:{
                    title: "request",
                     author: "发送数据"
                }
            }).then(response=>{
                console.log(response);

            })
        }

         //请求
        but1[0].onclick=function(){
            axios.request({
                method:'POST',
                url: 'http://localhost:3000/posts',
                data:{
                    "title": "request",
                     "author": "发送数据第二次"
                }
            }).then(response=>{
                console.log(response);

            })
        }

 方式三 、通过已经封装好的方法发送

   (1)、POST   axios.post(url,JSON).then(  lambda表达式)
                以及其他的方法
   //发送POST请求
        but1[1].onclick=function(){
            //
            axios.post(
                'http://localhost:3000/comments',
                {
                 
                 "body": "成功",
                 "postId": 1
    
                }

            ).then(response=>{
                console.log(response);
            })

        }

 三、响应结果,服务端返回的数据

 then(response=>{});

        response从服务端得到的数据:

            config: 包含请求内容(请求类型、请求体、url等)。

            data: 响应体的结果, JSON对象 (服务器返回的结果数据)

            headers: 响应头信息

            request: 原生的AJAX请求对象

            status: 响应状态码

            statusText: 响应的状态字符串

四、axios配置对象

    url: '/user',
    method: 'get',  //默认是get提交方法
    baseURL: '',    //设置好之后可以直接发送请求路径,不用再写请求和协议
   
     transformRequest:[function(data,haeders){  //对请求的数据进行处理,处理完成后再发送给服务器
        return data;
    }],
   
   transformResponse: [function(data,haeders){ //可以对响应的结果进行改变
         return data;
    }], 
    
   headers:{},// 对请求头信息进行配置

    
   params:{    //设置url参数
        ID:123
    },
  
 
    paramsSerializer:function(params){ //d对请求参数进行序列化转换成字符串

    }
    等

  五、axios默认设置(重要)

     //默认设置
        axios.defaults.method='GET'; //设置默认请求
        axios.defaults.baseURL= 'http://localhost:3000'; //设置url请求前部分,url就可以只设置后部分
        axios.defaults.params={id:100};// 添加URL上的请求参数 ?id=100
        axios.defaults.timeout=3000; //超时时间 毫秒  时间过后请求超时,停止当前请求

示例:

     //默认设置
        axios.defaults.method='GET'; //设置默认请求
        axios.defaults.baseURL= 'http://localhost:3000'; //设置url请求前部分,url就可以只设置后部分
        axios.defaults.params={id:100};// 添加URL上的请求参数 ?id=100
        axios.defaults.timeout=3000; //超时时间 毫秒  时间过后请求超时,停止当前请求

 but1[0].onclick=function(){
            axios({
                method:'GET',
                url: '/posts',// baseURL 已经设置了默认的后部分

            }).then(response=>{
                console.log(response);
            })

        }

 六、创建实例对象发送axios请求(重要)

后端有多个放服务器进行数据传输时 用这种方式结构更加清除

 1、创建实例对象

通过axios.create() 方法创建

 const duanzi=axios.create({   //通过axios.create创建的对象duanzi同样具有axios的功能
            baseURL: 'https://api.apiopen.top', //设置默认url头部
            tiemout: 2000 //设置超时时间
        })

 2、    使用创建好的对象

这里duanzi 与axios对象功能几近是一样的

   //和axios 一样能直接使用
        duanzi(
            {
                url: '/getJoke'
            }
        ).then(respons=>{
            console.log(respons);
        })

  3、 创建的对象也能使用封装好的方法

  duanzi.get('/getJoke').then(response=>{
            console.log(response);
        })

七、拦截器(重要)

请求拦截器:在发送请求之前可以借助 函数来对请求参数和内容进行处理和检测,没问题直接发                         送,出现问题可以停止或取消请求的发送

 响应拦截器: 当服务器返回结果后,处理返回结果之前先对结果进行预处理或格式化处理.

  发送请求 执行顺序         请求拦截器==>服务器==>响应拦截器==>自定义成功回调函数

      正常顺序 :               请求拦截器成功回调==>响应拦截器成功回调==>自定义成功回调函数then

      请求拦截器成功回调函数出错: 请求拦截器成功回调出错==>响应拦截器失败回调==>自定义失败回调函数catch

 请求拦截器

         request: axios.interceptors.request.use(成功回调函数,失败回调函数)

    响应拦截器

        response:  axios.interceptors.response.use(成功回调函数,失败回调函数)

  自定义回调函数:

         then :自定义成功的回调函数;

         catch:自定义失败的回调函数

示例:

//和Promise有关
        //设置请求拦截器  自定义参数config 就是配置对象,可以对请求内容进行修改
        axios.interceptors.request.use(function (config){
            config.params={a:100};//在请求拦截器中对参数进行修改
            console.log(config);
            console.log("请求拦截器 成功");
           //  throw '出错';
           return config;
        },function(error){
            console.log('请求拦截器 失败');
            return Promise.reject(error);
        } );

          //设置响应拦截器 自定义响应参数 response 只有响应体数据(服务器返回来的数据)
          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/posts'
        }).then(respons=>{
            console.log("自定义成功回调函数");
            console.log(respons);
        }).catch(reason=>{
            console.log("自定义失败回调函数");
        });


八、axios取消请求

通过cancelToken 创建一个可取消的函数 axios.CancelToken

 var cancel=null; //创捷的取消请求函数,也可以用来判断当前请求是否执行完 未执行完就为 取消请求方法,执行完后就在then赋值为null

         //按下发送当前请求
        but1[4].onclick=function(){
            axios({
                method:'GET',
                url:'http://localhost:3000/posts',
                //1.添加配置对象的属性
                cancelToken: new axios.CancelToken(function(c){
                    //将c的值赋值给cancel, cancel() 方法就具有了取消当前请求的能力
                    cancel=c;
                })
            }).then(respo=>{
                console.log(respo);
                 cancel=null;//赋值为null,表示请求已经执行完,当前请求过程不再需要 取消请求方法
            })
        }

        //按下按钮取消对应的请求的发送
        but1[5].onclick=function(){

              if(cancel!==null){ //请求未执行完才能取消请求
                 cancel(); //直接调用cancel()方法取消请求
            }
        }

仅供学习参考,有错误还请在评论区指出

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值