vue封装请求并且返回数据

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>
Vue3中,封装axios是为了简化API请求的过程,使其更易于管理并提高代码复用性。以下是一个简单的步骤来创建一个封装的axios实例: 1. 首先,安装axios库: ```bash npm install axios ``` 2. 创建一个名为`axios.js`的文件,用于封装axios实例: ```javascript import axios from 'axios'; // 创建axios实例并配置默认选项 const service = axios.create({ baseURL: process.env.VUE_APP_API_URL, // API基础URL,根据实际情况替换 timeout: 5000, // 请求超时时间 headers: { 'Content-Type': 'application/json', }, }); // 拦截器处理,比如全局错误处理、添加身份验证等 service.interceptors.request.use( config => { // 在发送请求之前做些什么,如设置token等 return config; }, error => Promise.reject(error) ); service.interceptors.response.use( response => { // 对响应数据进行处理,例如解构JSON return response.data; }, error => { // 对错误进行处理,例如显示错误信息 console.error('Error:', error.message); Promise.reject(error.response.data || { message: error.message }); } ); // 导出service供其他组件使用 export default service; ``` 3. 使用封装好的axios在组件中发送请求: ```vue <script setup> import axios from '@/utils/axios'; async function fetchData() { try { const response = await axios.get('/your-endpoint'); // 处理返回数据 console.log(response); } catch (error) { console.error(error); } } onMounted(() => { fetchData(); }); </script> ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值