在Vue3中,可以通过创建一个公共API来处理所有的Ajax POST和GET请求,而无需使用axios。下面是一个实现的示例:
api.js
的文件。api.js
文件中,引入Vue和axios:import { reactive } from 'vue'
import axios from 'axios'
api
的响应式对象,并设置默认值:const api = reactive({
data: null,
loading: false,
error: null
})
request
的函数,用于发送Ajax请求:const request = async (method, url, data = null) => {
api.loading = true
api.error = null
try {
const response = await axios({
method,
url,
data
})
api.data = response.data
} catch (error) {
api.error = error.message
} finally {
api.loading = false
}
}
api
和request
导出,以便在其他组件中使用:export { api, request }
现在,你可以在任何组件中使用这个公共API来发送Ajax请求。以下是一个示例:
import { api, request } from './api.js'
export default {
mounted() {
// 发送GET请求
request('get', 'https://api.example.com/data')
// 发送POST请求
request('post', 'https://api.example.com/data', { name: 'John' })
},
computed: {
isLoading() {
return api.loading
},
isError() {
return api.error
},
responseData() {
return api.data
}
}
}
在上面的示例中,request
函数用于发送GET和POST请求,并将响应数据存储在api.data
中。你可以通过api.loading
来判断请求是否正在进行中,通过api.error
来获取错误信息。
这样,你就可以在所有组件中使用这个公共API来处理Ajax请求,而无需在每个组件中单独使用axios。
领取专属 10元无门槛券
手把手带您无忧上云