html引入vue,封装axios请求

最新推荐文章于 2024-07-24 14:58:19 发布

莉莉happyDay

最新推荐文章于 2024-07-24 14:58:19 发布

阅读量1.2k

点赞数

文章标签： vue.js html 前端

本文链接：https://blog.csdn.net/qq_35407448/article/details/125183652

版权

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>')
//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>')

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);
      });
  });
}