1.dsfdsdfs

什么是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>