Ajax常用封裝庫(kù)——Axios的使用

axios（）.then(function(response){
 //正常請(qǐng)求的響應(yīng)信息對(duì)象response
})
.catch(function(error){
 //捕獲的錯(cuò)誤
})

script src="https://unpkg.com/axios/dist/axios.min.js">/script>
script>
 //使用axios方法    post請(qǐng)求
axios({
         url:"/pinglun",
         method:"post",
         baseURL:"http://localhost:3000",
         header:{
               "Content-Type":"application/json"
         },
        data:{
            "content":"well",
            "lyId":4
         },
    timeout:1000,
  }).then(function(res){
       console.log(res.data);
   }).catch(function(error){
       console.log(error);
})
 /script>

axios.defaults.baseURL = 'https://xxx.xxx.com';
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencode'

//axios 的請(qǐng)求攔截器
axios.interceptors.request.use(function(config){
 //配置項(xiàng)config
  config.params = {
        id:2 //對(duì)配置項(xiàng)中的params進(jìn)行更改，篩選id=2
    }
   return config;//要有返回值
})
    
//axios 方法
axios("http://localhost:3000/liuyan")
.then(function(res){
      console.log(res.data);
 })
.catch(function(error){
      console.log(error);
})
    
//axios 方法
axios("http://localhost:3000/pinglun")
.then(function (res) {
    console.log(res.data);
})
.catch(function (error) {
     console.log(error);
})
//多個(gè)axios方法也可以攔截

//axios 的響應(yīng)攔截器
axios.interceptors.response.use(function(response){
     return(response.data);//response里有很多值，選擇data即可
})
    
//axios 方法
axios("http://localhost:3000/liuyan")
.then(function (res) {
      console.log(res);//response那里攔截了，已經(jīng)將數(shù)據(jù)傳成data了
})
.catch(function (error) {
     console.log(error);
})

//axios.get(url[,config])
    
axios.get("http://localhost:3000/liuyan?id=2")
 .then(function(res){
     console.log(res.data);
})
    
axios.get("http://localhost:3000/liuyan",{
   params:{
        id:1
   }
}).then(function(res){
    console.log(res.data);
})

//axios.post(url[,data[,config]]) , post請(qǐng)求，添加數(shù)據(jù)
axios.post("http://localhost:3000/users",{
    name:"laowang",
    age:23,
    class:1
})

//axios.delete(url[,config])
axios.delete("http://localhost:3000/liuyan",{
   params:{
         id:5
    }
})

//axios.put(url[,data[,config]])
axios.put("http://localhost:3000/liuyan",{
    name:"wangshisan",
    id:11
})

//xhr.onload事件：只在請(qǐng)求完成時(shí)觸發(fā)
//xhr.onprogress事件：只在請(qǐng)求進(jìn)行中觸發(fā)
var xhr = new XMLHttpRequest();
xhr.open("get","http://localhost:3000/pinglun");
xhr.onload = function(){
     console.log("load:",this.readyState);
};
xhr.onprogress = function(e){
    console.log("progress:",this.readyState);
    //在周期性請(qǐng)求過(guò)程中，接收到的數(shù)據(jù)個(gè)數(shù)
     console.log(e.loaded);
     //接收數(shù)據(jù)的總個(gè)數(shù)
     console.log(e.total);
}
xhr.send(null);

//XMLHttpRequest之前的response返回
//responseText
// responseXml
var xhr = new XMLHttpRequest();
xhr.open("get","http://localhost:3000/pinglun");
xhr.onload = function(){
  var data = JSON.parse(this.responseText);
          console.log(data);
   }
xhr.send(null);
           
// xhr2.0新增的response屬性 
// response
// responseType
var xhr = new XMLHttpRequest();
xhr.open("get","http://localhost:3000/liuyan");
xhr.responseType = "json";
xhr.onload = function(){
    console.log(this.response);
}
xhr.send(null)