前言
在前端开发中，我们使用Vue框架经常会涉及到Ajax请求。而通常情况下我们需要请求的接口都是由一个同一的服务器提供的。但在某些场景中，我们需要请求多个不同的服务器地址，例如在开发一个混合应用时需要请求多个不同的服务器获取数据。本文将介绍在Vue中如何请求多个服务器地址。
方案一：使用axios
axios 是一个基于Promise的HTTP请求库，可以用于浏览器和node.js中。Vue.js 官方推荐的ajax库就是axios。
我们可以在Vue项目中通过npm安装axios：
立即学习“前端免费学习笔记（深入）”；
npm install axios --save
在具体使用时，我们可以通过修改axios的defaults属性，来改变默认的请求配置。在这里，我们可以通过修改defaults属性的baseURL来更改请求的默认地址。如下代码所示：
//创建axios实例
let instance = axios.create({
baseURL: 'http://localhost:8080'
})
//第一个接口请求
instance.get('/api/employee')
.then(function(response) {
console.log(response.data)
})
.catch(function(error) {
console.log(error)
})
//第二个接口请求
instance.get('/api/company')
.then(function(response) {
console.log(response.data)
})
.catch(function(error) {
console.log(error)
})在上面的代码中，我们创建了一个axios实例并通过defaults属性将基础地址设为http://localhost:8080，然后分别请求了/api/employee和/api/company两个接口。
但是，这种方法存在一些问题。如果我们请求的服务器地址较多时，可能会引起代码的冗余。除此之外，如果我们需要请求的地址是在运行时才确定的，那么就无法使用这种方法。
方案二：使用async/await
通过使用async/await方式，我们可以更简洁的请求多个不同的服务器地址。下面是一段使用async/await的代码示例：
async function loadData() {
try {
let employee = await axios.get('http://localhost:8080/api/employee')
console.log(employee.data)
let company = await axios.get('http://localhost:8081/api/company')
console.log(company.data)
} catch (error) {
console.log(error)
}
}
loadData()通过async/await方式，我们可以在代码里非常简洁的请求多个服务器地址。但是，这种方式也存在一些问题。例如，如果请求的地址均为大量的，那么使用async/await可能会导致请求过程变得非常缓慢。
方案三：使用Promise.all
我们还可以使用JavaScript原生的Promise.all方法来实现请求多个服务器地址。Promise.all接受一个由Promise对象组成的数组作为参数，然后等待所有的Promise对象都resolve后统一返回。
Promise.all([
axios.get('http://localhost:8080/api/employee'),
axios.get('http://localhost:8081/api/company')
])
.then(function(result) {
console.log(result[0].data)
console.log(result[1].data)
})
.catch(function(error) {
console.log(error)
});上述代码将同时请求'http://localhost:8080/api/employee'和'http://localhost:8081/api/company'这两个地址，并在两个请求都成功返回后输出他们的结果。
总结
以上就是在Vue中请求多个服务器地址的三种方法。各种方法都有其优点和不足，我们可以根据具体情况选择最适合自己的方法。在开发中，我们需要根据实际需求灵活使用技术，为用户提供优秀的产品和服务。
