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

「爱情、让人受尽委屈。」 2021-08-02 18:09 404阅读 0赞

### 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

1.  axios实例配置

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

1.  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** 小拾岁月  
扫码：  
![20200622115352592.jpg][]

[20200622115352592.jpg]: /images/20210802/f9c21b07ef5f490e9907576120309c06.png