nuxt axios封装
时间: 2024-10-09 20:15:19 浏览: 65
解决Nuxt使用axios跨域问题
Nuxt.js是一个基于Vue.js的框架,它结合了SSR(Server-Side Rendering) 和 NPM 模块化的优势。为了简化在Nuxt应用中使用axios(一个流行的HTTP客户端库)进行API请求的封装,通常会创建一个axios实例,并将其注入到`store`或全局插件中,以便在整个应用中复用。
以下是一个简单的Nuxt.js中axios封装示例:
```javascript
// store/index.js 或 plugins/axios.js
import axios from 'axios'
import { defineStore } from 'pinia'
// 创建axios实例并设置默认配置
const instance = axios.create({
baseURL: process.env.API_URL || 'https://api.example.com', // API base URL
timeout: 5000, // 超时时间
headers: {
'Content-Type': 'application/json',
Authorization: 'Bearer ' + localStorage.getItem('token') // 如果需要身份验证
}
})
export const useAxios = () => {
return instance
}
// 如果是在store中,可以用下面这种方式导出
export default defineStore('myStore', {
actions: {
async fetchData(url) {
try {
const response = await instance.get(url)
return response.data
} catch (error) {
console.error(error)
}
}
}
})
```
现在,你在任何地方都可以通过`useAxios()`获取这个封装好的axios实例,并进行API请求,如`this.$store.dispatch('fetchData', '/users')`。
阅读全文