广州建设局官方网站,佛山高端网站制作公司,用php做的博客网站,建设网站搞网络营销的总结Vue.js 是一款前端框架#xff0c;而 Axios 是一个基于 Promise 的 HTTP 请求客户端#xff0c;通常用于发送 Ajax 请求。在Vue.js开发中#xff0c;经常需要使用 Axios 来进行 HTTP 数据请求#xff0c;为了更好的维护和使用 Axios#xff0c;我们可以对其进行封装。下面…Vue.js 是一款前端框架而 Axios 是一个基于 Promise 的 HTTP 请求客户端通常用于发送 Ajax 请求。在Vue.js开发中经常需要使用 Axios 来进行 HTTP 数据请求为了更好的维护和使用 Axios我们可以对其进行封装。下面是一个简单的 Axios 封装示例
新建一个 axios.js 文件
import axios from axios// 创建一个 axios 实例
const service axios.create({baseURL: process.env.BASE_API, // 请求的根路径timeout: 5000 // 请求超时时间
})// 请求拦截器
service.interceptors.request.use(config {// 可以在此处添加 tokenreturn config},error {console.log(error)Promise.reject(error)}
)// 响应拦截器
service.interceptors.response.use(response {const res response.dataif (res.code ! 200) {console.log(res.msg)return Promise.reject(res.msg || Error)} else {return res}},error {console.log(err error)return Promise.reject(error)}
)export default service在 main.js 中引入 axios.js 文件
import axios from ./axios.jsVue.prototype.$http axios在组件中使用封装好的 axios
export default {data() {return {list: []}},mounted() {this.getList()},methods: {getList() {this.$http.get(/api/list).then(res {this.list res.list}).catch(error {console.log(error)})}}
}以上就是一个简单的 Axios 封装示例可以根据实际需求适当调整拦截器的逻辑。
