Vue中使用Axios以及拦截器配置(JavaScript版)

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

安装

npm install axios --save vue-axios

axios配置

• 新建utils/axios.js

import axios from "axios";

axios.create({
    baseURL: '127.0.0.1:8080/api',  //设置服务器地址
    timeout: 60 * 1000, // 超时设置
    withCredentials: true, // 检查跨站点访问控制
    changeOrigin: true//允许跨域
})

axios.interceptors.request.use(
    request => {
        console.log("请求成功");
        return request;
    },
    error => {
        return Promise.reject(error);
    }
);
axios.interceptors.response.use(
    response => {
        console.log("响应成功");
        return response;
    },
    error => {
        return Promise.reject(error);
    }
);

export default axios

• 配置main.js

import {createApp} from 'vue'
import App from './App.vue'
import axios from "./utils/axios";
import VueAxios from "vue-axios";

createApp(App)
    .use(VueAxios, axios)
    .mount('#app')

配置跨域

• 新建vue.config.js 详情参考：vue配置参考

module.exports = {
    publicPath: "/",
    outputDir: "dist",
    lintOnSave: false,
    devServer: {
        host: "127.0.0.1",
        port: 8888,
        open: true,
        proxy: {
            '/': {
                target: "127.0.0.1:8080/api",
                changeOrigin: true
            }
        }
    }
}

测试

• Home.vue

<template>
  <div>
    <button @click="testBth">测试</button>
  </div>
</template>
<script>
import axios from "axios";

export default {
  name: "Home",
  methods: {
    testBth() {
      this.axios.get("/test").then(res => {
        console.log(res.data);
      }).catch(err => {
        console.log(err);
      })
    },
  }
}
</script>

<style scoped lang="less">

</style>