axios 简单用法

最新推荐文章于 2024-08-19 14:17:41 发布

易泽耶

最新推荐文章于 2024-08-19 14:17:41 发布

阅读量551

点赞数

文章标签： Vue axios 接口调用数据获取错误处理

本文链接：https://blog.csdn.net/szzwyy/article/details/122142667

版权

第一步：配置axios

npm i axios

第二步：在main.js中引入


import axios from 'axios'
Vue.prototype.$axios = axios

第三步：在目标组件使用

1.接口

data() {
    return {
      input："",
      info:[],
      baseUrl: 'http://127.0.0.1:4523/mock/520063',
    }
  },

methods:{
    souSuo (){
    // 此处/userInfo为参数，this.baseUrl为data中的接口
      this.$axios.get (`${this.baseUrl}/userInfo`,{
        params:{
       //此处this.input为传给后端的参数
          name:this.input
        }
      })
      .then(res=>{
        //把接口中res.data赋值给info
        const info=res.data
        if (info.code===200) {
           //把info.data.lover赋值给data中的info
          this.info=info.data.lover
            console.log(this.info)
        }else if (info.code===400) {
        //饿了么ui中的提示输入错误
          this.$message.error('输入错误');
        }
      })
    },
}