axios学习总结

不爱小白的小孩

于 2023-04-09 19:48:14 发布

阅读量543

点赞数

文章标签：学习前端 javascript

本文链接：https://blog.csdn.net/weixin_72388638/article/details/130046346

版权

一、前言

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

方式一：直接使用

方式二：使用request方法，使用方式和直接使用一致

六、创建实例对象发送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()方法取消请求
            }
        }

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