Axios學習(3)---axio實例

Axios學習(3)—axio實例

一、axios實例的創建

比如：後端接口地址有多個（www.test.com、www.example.com），並且超時時長不同（1000ms、2000ms），這個時候，我們可以創建實例。

思路如下：創建多個實例，配置不同的超時時長，用不同的實例去請求不同的接口。使用axios.acreate來創建實例，配置相關信息，進行網絡請求。代碼如下：

// 實例1
let instance = axios.create({
  baseURL:'http://loacalhost:8080',
  timeout:1000
})
instance.get('/data.json').then(res=>{
  console.log(res)
})
//實例2
let instance2 = axios.create({
  baseURL: "http://loacalhost:8081",
  timeout: 2000
});
instance2.get("/city.json").then(res => {
  console.log(res);
});

備註：此時我們就可以訪問http://loacalhost:8080與http://loacalhost:8081兩個不同域名的接口，並且使用不同的配置。

---

二、axios實例的相關配置

（1）配置列表

• baseURL：請求的域名（基本地址）。

• timeout：請求的超時時長，超出後後端返回401。

  備註：一般由後端定義，後端的接口需要的處理時長較長的時候，如果請求的時間過長，後端處理不過來，就會阻塞，給服務器造成較大的壓力。設置後，可以及時釋放掉。

• url：請求路徑。

• method：請求方法。如：get、post、put、patch、delete等。

• headers：請求頭。

• params：將請求參數拼接到url上

• data：將請求參數放置到請求體裏

    axios.create({
        baseURL:'', //請求的域名（基本地址）
        timeout:2000, //請求的超時時長，單位毫秒，默認。
        url:'/data.json', //請求路徑
        method:'get', //請求方法
        headers:{
            token:''
        }, //設置請求頭
        params:{

        },//將請求參數拼接到url上
        data:{

        }, //將請求參數放置到請求體裏
    });

三種配置方式：

1. axios全局配置

    axios.defaults.baseURL = 'http://localhost:8080'
    axios.defaults.timeout = 2000

2. axios實例配置

    let instance = axios.create();
    instance.defaults.timeout = 3000

3. axios請求配置

    instance.get('/data.json',{
        timeout:5000
    })

優先級：axios全局配置 < axios實例配置 < axios請求配置

---

三、常用參數配置的使用方法

舉例1：

    let instance1 = axios.create({
        baseURL:'http://localhost:9090',
        timeout:1000
    })
    instance1.get("/contactList",{
        params:{
            id:10
        }
    }).then(res=>{
        console.log(res)
    })

分析：配置的參數爲baseURL：‘http://localhost:9090’，timeout:1000，method:‘get’，params:{ id:10}，url:’/contactList’

舉例2：

    let instance2 = axios.create({
        baseURL:'http://localhost:9091',
        timeout:3000
    })
    instance2.get("/contactList",{
        timeout:5000
    }).then(res=>{
        console.log(res)
    })

分析：配置的參數爲baseURL：‘http://localhost:9091’，timeout:5000，method:‘get’，url:’/contactList’

注意：最終的有效配置是由優先級高的覆蓋優先級低的。