【前端】Axios在vue3中的使用教程及注意事项

引入

• 首先运行npm install --save axios vue-axios命令安装axios和vue-axios
• 在vue3项目的main.js文件中插入以下代码引入axios，注意vue-axios和axios需要搭配使用

import axios from 'axios';
import VueAxios from 'vue-axios'
axios.defaults.baseURL = 'https://www.xxxx.com/';
app.use(VueAxios,axios);

• ps:axios.defaults.baseURL = 'https://www.xxxx.com/';可以用来设置baseurl，方便之后再请求中直接输入请求地址，而不需要再次输入顶级域名

使用

• 在vue3页面的"export default {"前插入const axios = require('axios');在页面中引入axios

get请求

axios({
    method:'get',
    url:'user/login',//这里由于之前设置了baseURL,所以直接跳过顶级域名
    params:{
      username:username,
      password:pwd,
      userlevel:"1",
    }
  })
  .then(function (response) {
    if (response.data.statuscode==3) {
      //密码正确
    }else{
      router.push('/force');//密码错误
    }
  })
  .catch(function (error) {
      console.log("catch"+error);
      Toast('登陆失败，请检查网络');
  });
})

注意！get返回的response中的数据在data里，要用response.data才能获取到返回的数据