Vue.js 中使用 axios 及 vue-resource 进行数据请求

在前端开发中，数据请求是不可避免的一项任务。Vue.js 是一个流行的 JavaScript 框架，它提供了两种数据请求库：axios 和 vue-resource。本文将详细介绍如何在 Vue.js 中使用这两个库进行数据请求，并提供示例代码和指导意义。

axios

axios 是一个基于 Promise 的 HTTP 库，它可以在浏览器和 Node.js 中使用。axios 可以发送异步请求并处理响应数据。在 Vue.js 中使用 axios，需要先安装 axios 库：

npm install axios

然后在 Vue 组件中引入 axios：

import axios from 'axios'

接下来，可以使用 axios 发送 GET、POST、PUT、DELETE 等请求：

axios.get('/api/data')
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.log(error)
  })

上面的代码中，使用 axios 发送了一个 GET 请求，请求地址为 /api/data。如果请求成功，会打印响应数据，如果请求失败，会打印错误信息。

除了发送 GET 请求，还可以发送 POST 请求：

-- -------------------- ---- -------
----------------------- -
  ----- -----
  ---- --
--
  -------------- -- -
    --------------------------
  --
  ------------ -- -
    ------------------
  --

上面的代码中，使用 axios 发送了一个 POST 请求，请求地址为 /api/data，请求体为一个包含 name 和 age 字段的对象。如果请求成功，会打印响应数据，如果请求失败，会打印错误信息。

axios 还支持拦截器，可以在请求发送前和响应返回后做一些处理。例如，可以在请求头中添加 token：

axios.interceptors.request.use(config => {
  config.headers.Authorization = 'Bearer ' + localStorage.getItem('token')
  return config
})

上面的代码中，使用 axios 的拦截器，在请求发送前，在请求头中添加了 token。

总之，axios 是一个功能强大的数据请求库，可以满足各种数据请求需求。

vue-resource

vue-resource 是一个 Vue.js 官方的数据请求插件，它基于 XMLHttpRequest 和 Promise 实现。在 Vue.js 中使用 vue-resource，需要先安装 vue-resource 库：

npm install vue-resource

然后在 Vue 组件中引入 vue-resource：

import VueResource from 'vue-resource'
Vue.use(VueResource)

接下来，可以使用 vue-resource 发送 GET、POST、PUT、DELETE 等请求：

this.$http.get('/api/data').then(response => {
  console.log(response.data)
}, error => {
  console.log(error)
})

上面的代码中，使用 vue-resource 发送了一个 GET 请求，请求地址为 /api/data。如果请求成功，会打印响应数据，如果请求失败，会打印错误信息。

除了发送 GET 请求，还可以发送 POST 请求：

this.$http.post('/api/data', {
  name: '张三',
  age: 18
}).then(response => {
  console.log(response.data)
}, error => {
  console.log(error)
})

上面的代码中，使用 vue-resource 发送了一个 POST 请求，请求地址为 /api/data，请求体为一个包含 name 和 age 字段的对象。如果请求成功，会打印响应数据，如果请求失败，会打印错误信息。

vue-resource 也支持拦截器，可以在请求发送前和响应返回后做一些处理。例如，可以在请求头中添加 token：

Vue.http.interceptors.push((request, next) => {
  request.headers.set('Authorization', 'Bearer ' + localStorage.getItem('token'))
  next()
})

上面的代码中，使用 vue-resource 的拦截器，在请求发送前，在请求头中添加了 token。

总之，vue-resource 是一个简单易用的数据请求插件，也可以满足大部分数据请求需求。

结语

本文详细介绍了在 Vue.js 中使用 axios 及 vue-resource 进行数据请求的方法，并提供了示例代码和指导意义。无论是使用 axios 还是 vue-resource，都需要注意安全性和性能问题，例如，在请求头中添加 token 和处理跨域问题等。希望本文能对大家学习和使用 Vue.js 有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6788cf870930706647501230