html引入vue,封装axios请求_html vue axios-CSDN博客

本文链接：https://blog.csdn.net/qq_37880968/article/details/123331531

本文介绍了如何在HTML中引入Vue，并实现axios的全局封装，以进行HTTP请求。通过实例展示了如何在Vue组件中调用封装的getClassifyAll方法获取分类数据，同时处理了请求拦截和错误处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html引入vue,封装axios请求

引入全局公用js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Home</title>
    <meta name="description" content="">
    <script type="text/javascript" src="js/common/base-js.js"></script>
</head>
<body>
<script type="text/babel">
    new Vue({
        el: '#index',
        data: {
            classifyAll: []
        },
        mounted() {
        },
        created() {
			this.getClassifyAll();
        },
        methods: {
            getClassifyAll() {
                get('/classify/getClassifyAll').then(res => {
                    console.log(res);
                    this.classifyAll = res.data;
                }).catch(err => {
                    console.log(err);
                });
            }
        }
    })
</script>
</body>
</html>

base-js.js

//vuejs
document.write('<script type="text/javascript" src="include/vue.min.js"></script>')
//jQuery Librery
document.write('<script src="js/jquery-3.3.1.min.js"></script>')
//Bootsrap
document.write('<script src="js/bootstrap.min.js"></script>')
//axios
document.write('<script src="include/axios.min.js"></script>')
//httpjs
document.write('<script src="js/common/http.js"></script>')

//header
document.write('<script src="include/header.js"></script>')
//footer
document.write('<script src="include/footer.js"></script>')
//footer
document.write('<script src="include/browser.min.js"></script>')

//custom
document.write('<script src="js/custom.js"></script>')

http.js

/** axios封装
 * 请求拦截、相应拦截、错误统一处理
 */
const httprequest = axios.create({
  baseURL: "http://localhost:8091/venus",
  //timeout: 1000,
  headers: {
    token: "",
  },
});

// 请求拦截器
httprequest.interceptors.request.use(
  function (config) {
    return config;
  },
  function (error) {
    return Promise.reject(error);
  }
);

//响应拦截
httprequest.interceptors.response.use(
  function (response) {
    const res = response.data;
    //跳转到登录页
    if (res.code === 401) {
      window.location = `${window.logoutUrl}?url=${window.location.origin}`;
    }
    return response;
  },
  function (error) {
    return Promise.reject(error);
  }
);

function get(url, params) {
  return new Promise((resolve, reject) => {
    httprequest
      .get(url, { params: params })
      .then((res) => {
        resolve(res.data);
      })
      .catch((err) => {
        reject(err.data);
      });
  });
}
// qs.stringify(data)
function post(url, data) {
  return new Promise((resolve, reject) => {
    httprequest
      .post(url, data)
      .then((res) => {
        resolve(res);
      })
      .catch((err) => {
        reject(err);
      });
  });
}