在NUXT中为调用API设置全局函数,可以通过在NUXT的插件中定义一个全局函数来实现。以下是实现的步骤:
api.js
的文件。api.js
文件中,定义一个全局函数,用于调用API。例如,可以使用axios库发送HTTP请求来调用API。以下是一个示例代码:import axios from 'axios'
export default function ({ app }, inject) {
// 定义一个全局函数,用于调用API
const callApi = async (url, method, data) => {
try {
const response = await axios({
url,
method,
data
})
return response.data
} catch (error) {
console.error(error)
throw new Error('API请求失败')
}
}
// 将全局函数注入到NUXT应用中
inject('callApi', callApi)
}
nuxt.config.js
文件中,将该插件添加到plugins
数组中。例如:export default {
// ...
plugins: [
// ...
{ src: '~/plugins/api.js', mode: 'client' },
// ...
],
// ...
}
this.$callApi
来调用API。例如,在页面组件中可以这样使用:export default {
async mounted() {
try {
const response = await this.$callApi('/api/users', 'GET')
console.log(response)
} catch (error) {
console.error(error)
}
}
}
领取专属 10元无门槛券
手把手带您无忧上云