axios.create()


<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>axios.create()</title>
</head>

<body>
<!--
1). axios create(config)
a.根据指定配置创建一个新的 axios,也就是每个新 axios都有自己的配置
b.新 axios只是没有取消请求和批量发请求的方法,其它所有语法都是一政的
c.为什么要设计这个语法?
需求:项目中有部分接口需要的配置与另一部分接口需要的配置不太一样,如何处理
解决:创建2个新axios,每个都有自己特有的配置,分别应用到不同变求的接口请求中
-->
</body>
<script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
<script>

//使用axios发请求
axios.defaults.baseURL = 'http://localhost:3000'
axios({
url: '/posts'
})
//-------------------------------------------------------------------------------

//创建一个新的axios
const instance = axios.create({
baseURL: 'http://localhost:3000'
});

//使用instance发请求
//方式一
instance({
url: '/posts'
})
//方式二
instance.get('/posts')

/*
那么问题来了,直接使用axios就可以发送请求了,我为什么还要再创建axios:
假如同一个项目,你要从不同的url地址来请求接口怎么办?
url地址1:http://localhost:3000
url地址2:http://localhost:3002
url地址3:http://localhost:3003
这个时候你创建多个不同的axios,是不是就可以轻松解决。
*/


</script>

</html>
 

   //创建 axios 函数对象   a.com   b.com
        let one = axios.create({
            baseURL: "http://localhost:8000",
            method: "GET",
            timeout: 2000,
            headers: {
                class: "H5200318"
            }
        });

        one({
            url:"/server"
        }).then(response => {
            console.log(response);
        })

        one.get('/server').then(respones=>{
            console.log(respones);
        })


        // let two = axios.create({
        //     baseURL: "http://b.com:8000/server",
        //     method: "GET",
        //     timeout: 2000,
        //     headers: {
        //         class: "H5200318"
        //     }
        // });

 


原文链接:https://blog.csdn.net/JEFF_luyiduan/java/article/details/103295801

posted @ 2020-06-28 18:12  全情海洋  阅读(27056)  评论(0编辑  收藏  举报