如何在Vue应用中全局配置和使用axios库?
时间: 2024-12-23 16:21:25 浏览: 8
在Vue应用中全局配置和使用axios库通常涉及以下几个步骤:
1. **安装axios**:首先,你需要通过npm或yarn安装axios。在命令行中运行:
```
npm install axios
```
2. **创建axios实例**:在你的项目中创建一个单独的文件,比如`src/api/index.js`,并导入axios:
```javascript
import axios from 'axios';
const instance = axios.create({
baseURL: process.env.BASE_API_URL || 'http://your-api-url.com', // 设置默认的API基础URL
headers: {
'Content-Type': 'application/json',
Authorization: 'Bearer ' + localStorage.getItem('token') // 如果需要添加认证信息
}
});
export default instance;
```
3. **Vue原型上挂载axios**:为了在整个应用中都能访问到这个axios实例,可以在Vue的原型对象上挂载它:
```javascript
Vue.prototype.$http = instance;
```
4. **在组件中使用**:现在在任何一个Vue组件中,你可以直接使用`this.$http`来发送HTTP请求了,例如:
```javascript
mounted() {
this.$http.get('/api/users').then(response => {
console.log(response.data);
}).catch(error => {
console.error(error);
});
}
```
阅读全文