Vue使用Axios

最新推荐文章于 2023-04-03 14:50:14 发布

一休~

最新推荐文章于 2023-04-03 14:50:14 发布

阅读量179

点赞数

分类专栏： Vue 文章标签： vue javascript

本文链接：https://blog.csdn.net/weixin_41324295/article/details/105581714

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

vue 3.0 使用vue add axios安装，vue 2.0使用npm install axios安装。

在main.js中引入Axios，并prototype。

import axios from 'axios'
axios.defaults.baseURL = "http://127.0.0.1:8000/api/"  \\配置前缀
Vue.prototype.$http = axios  \\也可以使用Vue.prototype.$axios = axios

在Login.vue中就可以直接使用了

export default {
  name: "Login",
  data() {
    return {
      loginForm: {
        username: "",
        password: ""
      },
      loginRules: {
        username: [
          { required: true, trigger: "blur", validator: validateUsername }
        ],
        password: [
          { required: true, trigger: "blur", validator: validatePassword }
        ]
      },
      loading: false,
      passwordType: "password",
      redirect: undefined
    };
  },
  methods: {
    showPwd() {
      if (this.passwordType === "password") {
        this.passwordType = "";
      } else {
        this.passwordType = "password";
      }
      this.$nextTick(() => {
        this.$refs.password.focus();
      });
    },
    handleLogin() {
      this.$refs.loginForm.validate(async valid => {   
        if (!valid) return;
        if (valid) {
          this.loading = true;
          const { data: res } = await this.$http.post({"login/",this.loginForm})  \\用await是防止出现promise错误
          if (res.meta.status !== 200) return console.log("登录失败")
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};