vue发送ajax请求在哪个生命周期

Vue.js 是一种用于构建用户界面的渐进式JavaScript框架，在前端开发中，我们经常需要与后端进行数据交互，这时就需要发送Ajax请求，在Vue.js中，我们可以使用axios库来发送Ajax请求，本文将详细介绍如何在Vue.js项目中使用axios发送Ajax请求。

1、安装axios

我们需要安装axios库，在项目根目录下，打开命令行工具，输入以下命令：

npm install axios --save

安装完成后，我们就可以在Vue.js项目中使用axios了。

2、引入axios

在需要使用axios的Vue组件中，我们需要先引入axios，通常，我们会在main.js文件中全局引入axios，然后在其他组件中通过this.$http访问，以下是main.js文件的内容：

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
Vue.prototype.$http = axios
new Vue({
  el: '#app',
  render: h => h(App)
})

现在，我们可以在其他组件中使用this.$http来发送Ajax请求了。

3、发送GET请求

假设我们需要从后端获取一些数据，可以使用axios发送GET请求，以下是一个简单的示例：

methods: {
  fetchData() {
    this.$http.get('https://api.example.com/data')
      .then(response => {
        console.log(response.data)
      })
      .catch(error => {
        console.log(error)
      })
  }
}

在这个示例中，我们定义了一个名为fetchData的方法，该方法使用this.$http.get()发送一个GET请求到https://api.example.com/data，请求成功后，我们将响应数据打印到控制台；请求失败时，我们将错误信息打印到控制台。

4、发送POST请求

除了GET请求，我们还可以使用axios发送POST请求，以下是一个简单的示例：

methods: {
  postData() {
    const data = {
      key1: 'value1',
      key2: 'value2'
    }
    this.$http.post('https://api.example.com/data', data)
      .then(response => {
        console.log(response.data)
      })
      .catch(error => {
        console.log(error)
      })
  }
}

在这个示例中，我们定义了一个名为postData的方法，该方法首先创建一个名为data的对象，然后使用this.$http.post()发送一个POST请求到https://api.example.com/data，并将data对象作为请求体，请求成功后，我们将响应数据打印到控制台；请求失败时，我们将错误信息打印到控制台。

5、发送PUT请求和DELETE请求

除了GET和POST请求，我们还可以使用axios发送PUT和DELETE请求，以下是一个简单的示例：

methods: {
  putData() {
    const data = {
      key1: 'newValue1',
      key2: 'newValue2'
    }
    this.$http.put('https://api.example.com/data/1', data)
      .then(response => {
        console.log(response.data)
      })
      .catch(error => {
        console.log(error)
      })
  },
  deleteData() {
    this.$http.delete('https://api.example.com/data/1')
      .then(response => {
        console.log(response.data)
      })
      .catch(error => {
        console.log(error)
      })
  }
}

在这个示例中，我们分别定义了名为putData和deleteData的方法，这两个方法分别使用this.$http.put()和this.$http.delete()发送PUT和DELETE请求，请求成功后，我们将响应数据打印到控制台；请求失败时，我们将错误信息打印到控制台，注意，PUT和DELETE请求通常需要指定资源的ID或其他唯一标识符，在本例中，我们在URL中添加了资源ID（例如/data/1）。