Axios学习(3)---axios实例

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’

注意：最终的有效配置是由优先级高的覆盖优先级低的。

---

四. 温馨提示

更多博文，请关注：xssy5431 小拾岁月
扫码：