欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

笔记--axios

程序员文章站 2022-03-23 22:13:24
get 无参请求get 有参请求

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);
    })

本文地址:https://blog.csdn.net/hahahaha__init__/article/details/108710933