axios发送请求（baseURL有多个的情况）

web_blog

于 2021-03-26 15:15:47 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： axios vue

本文链接：https://blog.csdn.net/qq_43248623/article/details/115246093

vue 同时被 2 个专栏收录

60 篇文章

订阅专栏

axios

3 篇文章

订阅专栏

这篇博客介绍了如何在JavaScript中使用axios库管理多个基础URL。通过创建不同的axios实例，每个实例对应一个不同的基础URL，实现了对多个API接口的请求。在`request.js`中，分别创建了两个axios实例，一个指向`152.136.185.210:8000/api/n3`，另一个指向`112.116.115.110:8000/api/n3`。在`main.js`中，分别调用这两个实例进行网络请求，从而实现对不同URL的请求操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先baseURL只有一个的情况：
先安装一下axios: npm install axios --save
request.js

import axios from 'axios'
export function request(config){
    //1.创建axios的实例
    const instance = axios.create({
        baseURL:'http://152.136.185.210:8000/api/n3'
    })
    //发送真正的网络请求
    return instance(config)
}

main.js

import {request} from './network/request'
request({
  url:'/home/multidata'
}).then(res => {
  console.log(res);
}).catch(err=>{
  console.log(err);  
})

baseURL有两个的情况：

request.js

function request(config){
    //1.创建axios实例
    const instance1 = axios.create({
        baseURL:"http://152.136.185.210:8000/api/n3"
    })
	//2.再创建一个axios实例，用来放第二个baseURL
    const instance2 = axios.create({
        baseURL:"http://112.116.115.110:8000/api/n3"
    })
    //发送真正的网络请求
    return [instance1,instance2]
}
export default request()

main.js

import request from './network/request'
request[0]({
    url:'/home/multidata'
  }).then(res => {
    console.log(res);
  }).catch(err=>{
    console.log(err);
    
})

request[1]({
  url:'/home/data'
}).then(res => {
  console.log(res);
}).catch(err=>{
  console.log(err);
  
})