axios入门

是基于promise对ajax的一种封装

axios基本使用：

//使用默认方式发送无参请求
<script src="http..."></script>
<script>
    axios({
        url:'http...',
    }).then(res=>{
        console.log(res);
    })
</script>
//从这个网址里调取了这个网址所保存的信息

//指定请求方式——get的无参请求
<script src="http..."></script>
<script>
    axios({
        url:'http...',
        method：'get'
    }).then(res=>{
        console.log(res);
    })
</script>

//发送get方式的有参请求
<script src="http..."></script>
<script>
    axios({
        url:'http...//id（参数）=1（参数值）//',
        parame:{
           id='1'，
           name:'张三'
        }
        method：'get'
    }).then(res=>{
        console.log(res);
    })
</script>

//使用post方式的无参请求
<script src="http..."></script>
<script>
    axios({
        url:'http...',
        method：'post'
    }).then(res=>{
        console.log(res);
    })
</script>

//使用post方式的有参请求
<script src="http..."></script>
<script>
    axios({
        url:'http...',
        method:'post',
        params:{
          name:'张三'
        }
    }).then(res=>{
        console.log(res);
    })
</script>
如果使用data传递
后台控制器接收到的name null axios使用post携带参数请求默认使用application/json

解决方式一：使用params属性进行数据传递
解决方式二："name=张三"
解决方式三：服务器端给接收的参数加上@requestBody

axios的post，get请求

使用axios.get方式发送无参请求

axios.get('http://.....').then(res=>{
    console.log(res);
}).catch(err=>){
    console.log(err);
}

使用axios.get方式发送有参请求

axios.get('http://.....'，{params:{id:1}}).then(res=>{
    console.log(res);
}).catch(err=>){
    console.log(err);
}

使用axios.post方式发送无参请求

axios.post('http://.....').then(res=>{
    console.log(res);
}).catch(err=>){
    console.log(err);
}

使用axios.get方式发送有参请求

axios.post('http://.....'，{params:{id:1}}).then(res=>{
    console.log(res);
}).catch(err=>){
    console.log(err);
}

axios并发请求

第一种方法

axios的并发请求

<script src = "http..."></script>
<script>
    axios.all([
  axios.get('http://.....'),
  axios.get('http://.....'，{params:{id:1}})
]).then(res=>{//请求成功的是一个数组
    console.log(res[0]);
    console.log(res[1]);
}).catch(err=>{
    console.log(err);
})
</script>

第二种方法

使用spread方法处理相应数组

<script src = "http..."></script>
<script>
    axios.all([
  axios.get('http://.....'),
  axios.get('http://.....'，{params:{id:1}})
]).then(//请求成功的是一个数组
   axios.spread((res1,res2)=>{
    console.log(res1);
    console.log(res2);
})
).catch(err=>{
    console.log(err);
})
</script>

axios全局配置

<script src = "http..."></script>
<script>
 
//配置全局属性，把地址一样的内容放在一起，就会使之后的请求地址要duan短一点
axios.defaults.baseURL='http..';
axios.defaults.timeout=5;
//在全局配置的基础上去网络请求
axios.post('剩下的地址'，{params:{id:1}}).then(res=>{
    console.log(res);
}).catch(err=>){
    console.log(err);
}
</script>

axios的实例

let newVar = axios.create（{
    baseURL:'http.....'
    timeout:5000
}）;//创建axios的实例
newVar({
    url:'剩下的地址'
}).then(res=>{
    console.log(res);
})

axios的拦截器

axios给我们提供了两大类拦截器，一种是请求方向的拦截（成功请求，失败的），另一种是响应方向的（成功的失败的）

拦截器的作用：

用于我们在网络请求的时候在发起请求之前或则响应时对操作进行响应的处理

发起请求时可以添加网页加载的动画 使用token认证时——强制登陆

响应的时候可以进行相应的数据处理

1.请求方向的
<script src = "http..."></script>
<script>
axios.interceptors.request.use(config=>{
    console.log("进入请求拦截器")
    console.log(config);
    return config;
},err=>{
    console.log("请求方向失败")
    console.log(err);
});

axios.post('http....'，{params:{id:1}}).then(res=>{
    console.log(res);
})
</script>

2.响应方向的

<script src = "http..."></script>
<script>
axios.interceptors.response.use(config=>{
    console.log("进入响应拦截器")
    console.log(config);
    return config.data;
},err=>{
    console.log("请求方向失败")
    console.log(err);
});
axios.post('http....'，{params:{id:1}}).then(res=>{
    console.log(res);
})
</script>

axios在vue中的模块封装