axios-526互联

title: axios
index_img: https://tuchuangs.com/imgs/2023/08/19/2ac41dcb56786d1d.png
tags:
  - Java Web
  - 前端
  - Vue
categories:
  - Java Web
excerpt: axios

使用axios

安装

npm install axios

引入和使用

created() 是 Vue 实例的一个生命周期钩子。可用于发送网络请求。

Vue 实例已经完全创建，可以访问到实例中的所有属性和方法

但该阶段组件并未挂载至DOM，所以如果你需要操作DOM，则应该放在 mounted() 钩子函数

<script>
import axios from 'axios';

export default {
  data() {
    return {
      // 初始化 posts 数据属性为空
      posts: null
    };
  },
  created() {
    // 在 Vue 实例创建完成后，发送 GET 请求获取数据
    axios.get('https://api.example.com/posts')
      .then(response => {
        // 当请求成功时，将返回的数据保存到 posts 数据属性中
        this.posts = response.data;
      })
      .catch(error => {
        // 如果请求失败，打印错误信息
        console.log(error);
      });
  }
};
</script>

请求格式

Get

// 使用 axios 发送 GET 请求到指定的 URL 
axios.get('/api/url')
  .then(response => {
    // 当请求成功时，打印返回的数据
    console.log(response.data);
  })
  .catch(error => {
    // 如果请求失败，打印错误信息
    console.error(error);
  });

Post

// 使用 axios 发送 POST 请求到指定的 URL，并且传递了两个参数
axios.post('/api/url', {
  param1: 'value1',
  param2: 'value2'
})
.then(response => {
  // 当请求成功时，打印返回的数据
  console.log(response.data);
})
.catch(error => {
  // 如果请求失败，打印错误信息
  console.error(error);
});

Put

// 使用 axios 发送 PUT 请求到指定的 URL，并且更新了两个参数
axios.put('/api/url', {
  param1: 'updatedValue1',
  param2: 'updatedValue2'
})
.then(response => {
  // 当请求成功时，打印返回的数据
  console.log(response.data);
})
.catch(error => {
  // 如果请求失败，打印错误信息
  console.error(error);
});

Delete

// 使用 axios 发送 DELETE 请求到指定的 URL
axios.delete('/api/url')
  .then(response => {
    // 当请求成功时，打印返回的数据
    console.log(response.data);
  })
  .catch(error => {
    // 如果请求失败，打印错误信息
    console.error(error);
  });

拦截器

可以简化请求,见Vue脚手架