axios学习笔记

Posted 做个机灵鬼

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了axios学习笔记相关的知识，希望对你有一定的参考价值。

什么是axios

1.基本promise的异步ajax请求库
2.浏览器端/node端都可以使用
3.支持请求／响应拦截器
4.支持请求取消
5.请求/响应数据转换
6.批量发送多个请求

1.使用axios发送ajax请求

1.需要先下载axios文件 或者添加在线地址

发送get请求 不携带参数
  //获取所有人的信息 get请求 不携带参数
         btn1.onclick = ()=>
              //完整版
              axios(
               //该地址为本地服务器地址
                url:'http://localhost:5000/persons',
                method:'GET'
            ).then(
                response =>console.log('成功了',response.data);,
                error => console.log('失败了',error);
            )
            //精简版
           /*  axios.get('http://localhost:5000/persons').then(
                resopnse =>console.log('成功了',resopnse);,
                Error =>console.log('失败了',Error);
            ) */
发送get请求 携带query参数(如果需要携带params参数 需要写在地址上)
  btn2.onclick= ()=>
             //完整版
             axios(
                
                    url:'http://localhost:5000/person',
                    method:'GET',
                    params:id:user_id.value//此处写的是paiams 携带的是query参数
                
             ).then(
                 response =>console.log('成功了',response.data);,
                 error =>console.log('失败了',error);
             )
             //精简版
             /* axios.get('http://localhost:5000/person',params:id:user_id.value)
             .then(
                 response =>console.log('成功了',response.data);,
                 Error =>console.log('失败了',Error);
             ) */
发送post请求 携带请求体参数
//增加一个人的信息 post请求 携带请求体参数
         btn3.onclick= ()=>
             //完整版
            /*  axios(
                 
                    url:'http://localhost:5000/person',
                    method:'POST',
                    // data:name:person_name.value,age:person_age.value//json编码
                    data:`name=$person_name.value&age=$person_age.value`//urlencoed编码
                 
             ).then(
                 response => console.log('成功了',response.data);,
                 error => console.log('失败了',error);
             ) */
             //精简版
             axios.post('http://localhost:5000/person',`name=$person_name.value&age=$person_age.value`).then(
                 response => console.log('成功了',response.data);,
                 error => console.log('失败了',error);
             )
发送put请求 更新一个人的信息
  //更新一个人的信息 put请求 携带请求体参数
         btn4.onclick = ()=>
          /*   axios(
                url:'http://localhost:5000/person',
                method:'PUT',
                data:id:updataId.value,name:updataName.value,age:updataAge.value
            ).then(
                 response => console.log('成功了',response.data);,
                 error => console.log('失败了',error);
            ) */
            axios.put(
                'http://localhost:5000/person',
                 id:updataId.value,name:updataName.value,age:updataAge.value
            ).then(
                response => console.log('成功了',response.data);,
                 error => console.log('失败了',error);
            )
发送delete请求 删除一个人的信息
 //删除一个人的信息 delete请求 携带paiams参数
         btn5.onclick = ()=>
             axios(
                 url:`http://localhost:5000/person/$deleteId.value`,
                 method:'DELETE'
             ).then(
                response => console.log('成功了',response.data);,
                 error => console.log('失败了',error);
             )

2.axios的常用配置项

  //给axios设置默认属性
         axios.defaults.timeout=2000;
         axios.defaults.headers = shchool:'atguigu';
         axios.defaults.baseURL = 'http://localhost:5000'
         btn1.onclick= ()=>
            axios(
             url:'/test1',
             method:'GET',
            //  params:delay:3000,//设置延时时间
            //  timeout:2000,//设置响应时限
             data:name:1,age:12,//请求体参数(json编码)
             //data:'name=1&age=3'//请求体参数(urlencode编码)
            //  headers:shchool:'atguigu',//设置请求头
             responseType:'json'//设置响应数据的格式(默认)
         ).then(
             response=>console.log('成功了',response.data);,
             error =>console.log('失败了',error);
         )

3.axios的create方法

1.根据指定配置创建一个新的axios, 也就就每个新axios都有自己的配置
2.新axios只是没有取消请求和批量发请求的方法, 其它所有语法都是一致的
3.为什么要设计这个语法?
(1)需求: 项目中有部分接口需要的配置与另一部分接口需要的配置不太一样, 如何处理
(2)解决: 创建2个新axios, 每个都有自己特有的配置, 分别应用到不同要求的接口请求中

  //创建另一个axios2,必须写在axios上面
         const axios2 = axios.create(
             
                 timeout:3000,
                 baseURL:'https://api.apiopen.top'
             
         );
       
         //给axios设置默认属性
         axios.defaults.timeout=2000;
         axios.defaults.headers = shchool:'atguigu';
         axios.defaults.baseURL = 'http://localhost:5000'
        
         btn1.onclick= ()=>
            axios(
             url:'/test1',
             method:'GET',
            //  params:delay:3000,//设置延时时间
            //  timeout:2000,//设置响应时限
             data:name:1,age:12,//请求体参数(json编码)
             //data:'name=1&age=3'//请求体参数(urlencode编码)
            //  headers:shchool:'atguigu',//设置请求头
             responseType:'json'//设置响应数据的格式(默认)
         ).then(
             response=>console.log('成功了',response.data);,
             error =>console.log('失败了',error);
         )
         
         //点击获取笑话
         btn2.onclick = ()=>
            axios2(
                url:'/getJoke',
                method:'GET'
            ).then(
                response=>console.log('成功了',response.data);,
                error =>console.log('失败了',error);
            )

4.axios的拦截器

1.说明: 调用axios()并不是立即发送ajax请求, 而是需要经历一个较长的流程
2.流程: 请求拦截器=> 发ajax请求 => 响应拦截器 =>请求的回调

 //请求拦截器
      axios.interceptors.request.use((config) => 
        if (Date.now() % 2 === 0) 
          config.headers.school = "atguiug";
        

        //必须写return config
        return config;
      );
      //响应拦截器
      axios.interceptors.response.use(
        (response) => 
          if (Date.now() % 2 === 0) 
            console.log("响应拦截器成功的回调执行");
            return response.data;
           else return "时间戳不是偶数";
        ,
        (error) => 
          console.log("响应拦截器失败的回调执行");
          // 返回一个处于pending状态的promise实例 那么then函数就不需要写失败的回调
          return new Promise(() => );
        
      );
      btn.onclick = async () => 
        const result = await axios.get("http://localhost:5000/persons");
        console.log(result);
      ;

5.axios取消发送

1.基本流程
①配置cancelToken对象
②缓存用于取消请求的cancel函数
③在后面特定时机调用cancel函数取消请求
④在错误回调中判断如果error是cancel, 做相应处理
2.实现功能
点击按钮, 取消某个正在请求中的请求
在请求一个接口前, 取消前面一个未完成的请求

 const CancelToken,isCancel = axios;//声明一个canceltoken
          let cancel
          btn1.onclick = async()=>
            if(cancel) cancel()
             axios(
                 url:'http://localhost:5000/test1?delay=3000',
                 method:'GET',
                 cancelToken:new CancelToken((c)=>
                    cancel = c;
                 )
             ).then(

                 response =>console.log('成功了',response.data);,
                 error =>
                     if(isCancel(error))
                         console.log(error);
                        console.log('用户取消请求',error.message);
                     
                     else console.log('失败了',error);
                    
                
             )
          
          btn2.onclick=()=>
             cancel('任性不要了');

6.拦截器与取消发送配合使用

 <script type="text/javascript">
      const btn1 = document.querySelector("#btn1");
      const btn2 = document.querySelector("#btn2");
      const  CancelToken, isCancel  = axios; //声明一个canceltoken
      let cancel;
      //请求拦截器与cancel配合使用
      axios.interceptors.request.use((config) => 
        if (cancel) cancel("取消了");
        config.cancelToken = new CancelToken((c) => 
          cancel = c;
        );
        return config;
      );
      //添加响应拦截器
      axios.interceptors.response.use(
        (response) => 
          return response.data;
        ,
        (error) => 
          if (isCancel(error)) 
            console.log("用户取消请求", error.message);
           else 
            console.log("失败了", error);
          
          //如果请求失败 无论是自己取消请求还是路径问题都设置停止程序
          return new Promise(() => );
        
      );
      btn1.onclick = async () => 
        const result = await axios.get(
          "http://localhost:5000/test1?delay=3000"
        );
        console.log("@@", result);
      ;
      btn2.onclick = () => 
        cancel("任性不要了");
      ;
    </script>

6.批量发送

 <script type="text/javascript" >
           const btn = document.querySelector('#btn1');
           btn.onclick = ()=>
           //调用all方法
            axios.all(
               [
                   axios.get('http://localhost:5000/test1'),
                   axios.get('http://localhost:5000/test2?delay=3000'),
                   axios.get('http://localhost:5000/test3')
               ]
           ).then(
               response => console.log(response);,
               error => console.log(error);
           )   
        
          
        </script>

以上是关于axios学习笔记的主要内容，如果未能解决你的问题，请参考以下文章

axios学习笔记

axios学习笔记

Axios学习笔记

vue3 学习笔记 —— axios 的使用有变化吗？

学习笔记Vue+Element UI+axios 实现简单的登录页面

VUE学习笔记：29.脚手架vue-cli之axios