Vue如何发起GET请求:实现前后端数据交互的示例代码

Vue如何发起GET请求:实现前后端数据交互的示例代码 第一张

Vue发起GET请求实现前后端数据交互

Vue可以使用它的官方提供的HTTP客户端Axios,也可以使用其他HTTP客户端来发起GET请求,实现前后端数据交互。

以下是使用Axios发起GET请求的示例代码:

// 导入axios
import axios from 'axios'

// 发起GET请求
axios.get('/api/user').then(res => {
  console.log(res.data)
}).catch(err => {
  console.log(err)
})

上面的代码中,使用import导入Axios,使用Axios的get方法发起GET请求,请求的路径是/api/user,请求成功后,将返回的数据打印到控制台,如果请求失败,将错误信息打印到控制台。

使用Axios发起GET请求还可以传递参数,例如:

// 导入axios
import axios from 'axios'

// 发起GET请求
axios.get('/api/user', {
  params: {
    id: 123
  }
}).then(res => {
  console.log(res.data)
}).catch(err => {
  console.log(err)
})

上面的代码中,使用Axios的get方法发起GET请求,同时传递参数,参数是id,值是123,请求成功后,将返回的数据打印到控制台,如果请求失败,将错误信息打印到控制台。

Vue还可以使用其他HTTP客户端来发起GET请求,比如fetch,它的使用方法如下:

// 发起GET请求
fetch('/api/user').then(res => {
  console.log(res.data)
}).catch(err => {
  console.log(err)
})

上面的代码中,使用fetch发起GET请求,请求的路径是/api/user,请求成功后,将返回的数据打印到控制台,如果请求失败,将错误信息打印到控制台。

使用fetch发起GET请求还可以传递参数,例如:

// 发起GET请求
fetch('/api/user', {
  method: 'GET',
  params: {
    id: 123
  }
}).then(res => {
  console.log(res.data)
}).catch(err => {
  console.log(err)
})

上面的代码中,使用fetch发起GET请求,同时传递参数,参数是id,值是123,请求成功后,将返回的数据打印到控制台,如果请求失败,将错误信息打印到控制台。

以上就是Vue如何发起GET请求,实现前后端数据交互的示例代码。

© 版权声明
THE END
分享