Axios学习(3)---axios实例 「爱情、让人受尽委屈。」 2021-08-02 18:09 353阅读 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
还没有评论,来说两句吧...