axios的使用

1.axios的基本使用

1.axios调用的返回值是Promise实例
2.成功的值叫response，失败的值叫error
3.axios成功的值是一个axios封装的response对象，服务器返回的真正数据在response.data中
4.携带query参数时，编写的配置项叫做params
5.携带params0参数时，需要自己手动拼在url中

1.1GET请求

完整版

Sever({
        url: 'http://localhost:3000/api/get',//请求地址
        method: 'GET',//请求方式
      }).then(
        response => {
          console.log(response);
        }
      ).catch(
        error=> {
          console.log('出错了',error);
        }
      )

精简版

axios.get(" url: 'http://localhost:3000/api/get'")
	.then(
		response => {}
	).catch(
		error => {
		
		}
	)

1.2携带query请求的axios

完整版

Sever({
        url: 'http://localhost:3000/api/get',
        method: 'GET',
        params: {  //写的是params 但是携带的是query参数
          id: personId.value
        }
      }).then(
        response=>{
          console.log(response);
        },
        error=>{
          console.log(error);
        })

精简版

 axios.get('http://localhost:3000/api/get',{params: {id: personId.value}}).then(
        response=>{
          console.log(response);
        },
        error=>{
          console.log(error);
        })
    }

1.3post请求携带json参数和url encoded参数

完整版

	Sever({
        url: 'http://localhost:3000/students',
        method: 'POST',
        //data: {name: personName.value, age: personAge.value} //携带请求体参数 (默认是json编码)
        data: `name = ${personName.value}&age = ${personAge.value}`//urlencoded
      }).then(
        response=>{
          console.log(response);
        },
        error=>{
          console.log(error);
        })

精简版

    axios.post('http://localhost:3000/students',{name: personName.value, age: personAge.value}).then(
      //`name = ${personName.value}&age = ${personAge.value}`
        response=>{
          console.log(response);
        },
        error=>{
          console.log(error);
        })
    }
    

1.4put请求携带json或者urlencoded参数

完整版

Sever({
        url: 'http://localhost:3000/students',
        method: 'PUT',
        data:{
          id: personUpdateId.value,
          name: personUpdateName.value,
          age: personUpdateAge.value
        }
      }).then(
        response=>{
          console.log(response);
        },
        error=>{
          console.log(error);
        })

精简版

axios.put('http://localhost:3000/students',{
        id: personUpdateId.value,
        name: personUpdateName.value,
        age: personUpdateAge.value
      }).then(
        response=>{
          console.log(response);
        },
        error=>{
          console.log(error);
        })
    }

1.5删除携带params参数

axios({
        url: `http://localhost:3000/students/${personDeleteId.value}`,
        method: 'DELETE',
        
      }).then(
        response=>{
          console.log(response);
        },
        error=>{
          console.log(error);
        })
    }
    

2.axios的常用项

• axios.default.timeout = 2000. //配置超时

• axios.default.header = {school: ‘atguigu’} // 配置请求头

• axios.defualt.baseURL = xxx // 配置默认请求地址

     url: 'http://localhost:3000/students',//请求地址
          method: 'GET',
          params: {a:1,b:2},//配置query参数
          /*data: {c:3,d:4},//配置请求体参数(json编码)
          data:`e=5&f=6`,//配置请求体参数(urlencoded编码)*/
          timeout: 2000,//配置超时的时间
          headers: {demo: 123},//配置请求头
          responseType:'json',//配置响应数据的格式（默认值）
          
        }).then(
          response => {
            console.log('成功了',response);
          },
          reason => {
            console.log('失败了', reason);
          }
        )
      }
  

  3.axios.create方法

  1. 根据指定配置创建一个新的axios, 也就是每个新axios都有自己的配置
  2. 新axios只是没有【取消请求】和【批量发请求】的方法, 其它所有语法都是一致的

  const axios2 = axios.create({
  	timeout:2000,
  	baseURL:'http://localhost:3000'
  })
  
   //给axios配置默认属性
   axios.defaults.timeout = 2000;
   axios.defaults.headers = {school: 'atguigu'};
   axios.defaults.baseURL = 'http://localhost:3000';
  

  4.axios的拦截器

  4.1请求拦截器

  如果同时写了两个响应拦截器那么会优先执行后面的

  axios.interceptors.request.use((config) => {
  	   console.log('请求拦截器执行了1');
        if(Date.now() %2 === 0) {
          config.headers.token = 'atguigu';
        }
        config.a = 1;
        console.log('@',config);
        return config;
  })
  

  4.2响应拦截器

    axios.interceptors.response.use(
        response => {
          console.log('响应拦截器成功的回调执行了',response);
          if(Date.now() %2 === 0) {
            return response.data;
          }else {
            return '时间戳是偶数不能给你数据';
          }
        },
        error =>{
          console.log('响应拦截器失败的回调执行了',error);
          alert(error);
          return new Promise(()=>{});
        }
      );
  

  5.axios中取消请求

    const {CancelToken} = axios; //CancelToken 能为一次请求打标识
      let cancel;
  
      btn1.addEventListener('click',async ()=>{
        axios({
          url: 'http://localhost:3000/students',
          cancelToken:new CancelToken((c)=>{
            console.log(c);//c是一个函数，调用c就可以关闭本次请求
            cancel = c;
          })
        }).then(
          response => {
            console.log('获取数据成功',response);
          },
          error => {
            console.log('获取数据失败',error);
          }
        )
      });
      
      btn2.addEventListener('click', ()=>{
        cancel();
      });
  

  多次点击 每次点击都取消上一次的请求

  const {CancelToken} = axios; //CancelToken 能为一次请求打标识
      let cancel;
  
      btn1.addEventListener('click',async ()=>{
        if(cancel){
          cancel();
        }
        axios({
          url: 'http://localhost:3000/students?delay=3000',
          cancelToken:new CancelToken((c)=>{
            console.log(c);//c是一个函数，调用c就可以关闭本次请求
            cancel = c;
          })
        }).then(
          response => {
            console.log('获取数据成功',response);
          },
          error => {
            console.log('获取数据失败',error);
          }
        )
      });
  

  在响应拦截器中取消请求

  
      //从axios
      const {CancelToken,isCancel} = axios; //CancelToken 能为一次请求打标识
      let 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.addEventListener('click',async ()=>{
        const result = await axios('http://localhost:3000/students?delay=3000');
        console.log(result);
      });
      
      btn2.addEventListener('click', ()=>{
        cancel();
      });
    
  

5.axios批量发送请求

   btn1.addEventListener('click',async ()=>{
      axios.all([
      axios.get(' http://localhost:3000/students'),
      axios.get(' http://localhost:3000/students'),
      axios.get(' http://localhost:3000/students'),
      ]).then(
        response =>{console.log(response);},
        error => {console.log('失败了',error);}
      )
    });