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