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
  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 小拾岁月
扫码:

你可能感兴趣的:(Axios)