vue封装请求并且返回数据

最新推荐文章于 2024-07-25 22:35:58 发布

置顶易小川不懂赵高

最新推荐文章于 2024-07-25 22:35:58 发布

阅读量2.6k

点赞数 1

本文链接：https://blog.csdn.net/jizhuangzhuang_/article/details/102839531

版权

assets>js创建JS文件

import axios from 'axios' //引入axios
function relationship(back) { //定义回调函数
  axios({
    method: 'POST',
    url: 'guide/relationship',
    headers: {
      token: localStorage.getItem('token') || axios.token //放自己的token
    }
  }).then(res=>{
    back(res) //回调函数
  }).catch(err=>{
    console.log(err)
  })
}

export default {
  relationship  //抛出去
}

在main.js里封装成vue原型链

/**
 * 封装获得与户主关系的函数
 * */
import relationship from './assets/js/relationship'
Vue.prototype.$relationship = relationship;

在组件中使用

<script>
  export default {
    name: 'App',
    data() {
      return {
      }
    },
    methods: {
      getrelationship(){
        this.$relationship.relationship((res)=>{ //自己写一个回调函数
          console.log(res) //将回调函数的返回内容打印到控制台
        });
      }
    },
    mounted() {
      this.getrelationship();
    }
  }
</script>