笔记--axios

get 无参请求

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    axios.get("http").then(res=>{
        console.log(res);
    }).catch(err=>{
        console.log(err);
    })
</script>

get 有参请求

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    axios.get("http", {params:{id:1}}).then(res=>{
        console.log(res);
    }).catch(err=>{
        console.log(err);
    })
</script>

post 无参请求

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    axios.post("http").then(res=>{
        console.log(res);
    }).catch(err=>{
        console.log(err);
    })
</script>

post 有参请求

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    axios.post("http", "name=张三&age=18").then(res=>{
        console.log(res);
    }).catch(err=>{
        console.log(err);
    })
</script>

axios并发 请求

<script src="https://unpkg.com/axios/dist/axios.min.js"></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="https://unpkg.com/axios/dist/axios.min.js"></script> //配置全局属性
    <script>
        axios.defaults.baseURL="url";
        axios.defaults.timeout=5000;
        
        axios.get("xxx").then(res=>{ //再全局配置的基础上去网络请求
            console.log(res);
        })
        axios.post("xxx").then(err1=>{
            console.log(err1);
        }).catch(err2=>{
            console.log(err2);
        })
    </script>

axios的实例

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        let newVar = axios.create({
            baseURL:"url",
            timeout:5000
        });  //创建axios的实例
        
        newVar({
            url:"getxxx"
        }).then(res=>{
            console.log(res);
        })
            

    </script>

axios的拦截器
请求方向

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
          axios.interceptors.request.use(config=>{
            console.log("进入请求拦截器");
            console.log(config);
            return config; // 放行请求
          }),err=>{
              console.log("请求方向失败");
              console.log(err);
          }

          axios.get("url").then(ass=>{
              console.log(ass);
          })

    </script>

响应方向

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
          axios.interceptors.response.use(config=>{
            console.log("进入响应拦截器");
            return config.data; // 放行响应
          }),err=>{
              console.log("响应方向失败");
              console.log(err);
          }

          axios.get("url").then(ass=>{
              console.log(ass);
          })

    </script>

封装到vue

	// 封装位置
    export function request(config){
        let newVar = axios.create((
            baseURL:"url",
            timeout:5000
        ));
        return newVar(config)
    }
    // 调用位置
    import {request} from './上面封装的位置'
    request({
        url:"关键字"
    }).then(res=>{
        console.log(res);
    })