Vue.js 中使用 axios 进行数据交互-JavaScript中文网-JavaScript教程资源分享门户

在现代 Web 开发中，数据交互是非常重要的一部分。Vue.js 是一款流行的前端框架，它提供了很多方便的功能来处理数据交互。其中，axios 是一款非常流行的 HTTP 客户端库，它能够让我们轻松地进行数据请求和响应处理。

本文将介绍如何在 Vue.js 中使用 axios 进行数据交互。我们将从安装和配置开始，然后介绍如何发起 GET、POST、PUT 和 DELETE 请求，并处理响应数据。最后，我们还会提供一些实用的技巧和最佳实践。

安装和配置

要使用 axios，首先需要在项目中安装它。可以使用 npm 或 yarn 进行安装：

npm install axios

或者

yarn add axios

安装完成后，可以在 Vue 组件中引入 axios：

import axios from 'axios'

接下来，我们需要配置 axios 的基本信息，例如请求的基础 URL、请求头部信息等。可以在 Vue 项目的入口文件中进行配置：

import axios from 'axios'

axios.defaults.baseURL = 'https://api.example.com'
axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('access_token')

在上面的代码中，我们设置了 axios 的基础 URL 为 https://api.example.com，这样在发送请求时就不需要每次都写完整的 URL。同时，我们还设置了请求头部信息，这里使用了 localStorage 存储的 access_token。

发起请求

有了 axios 的基础配置，我们就可以开始发送请求了。axios 提供了一系列方法来发起不同类型的请求，例如 GET、POST、PUT 和 DELETE。我们可以根据实际需求来选择不同的方法。

GET 请求

发起 GET 请求非常简单，只需要调用 axios.get 方法并传入请求的 URL 即可：

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

在上面的代码中，我们向 /users 发起了一个 GET 请求，并在响应后打印了响应数据。如果请求失败，我们也会打印错误信息。

POST 请求

发起 POST 请求需要传入请求的 URL 和请求体。可以使用 axios.post 方法来发起 POST 请求：

// www.javascriptcn.com code example
axios.post('/users', {
  name: 'John Doe',
  email: 'john.doe@example.com'
})
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.error(error)
  })

在上面的代码中，我们向 /users 发起了一个 POST 请求，并传入了一个包含 name 和 email 属性的对象。如果请求成功，我们会打印响应数据。

PUT 请求

发起 PUT 请求需要传入请求的 URL 和请求体。可以使用 axios.put 方法来发起 PUT 请求：

// www.javascriptcn.com code example
axios.put('/users/1', {
  name: 'John Doe',
  email: 'john.doe@example.com'
})
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.error(error)
  })

在上面的代码中，我们向 /users/1 发起了一个 PUT 请求，并传入了一个包含 name 和 email 属性的对象。如果请求成功，我们会打印响应数据。

DELETE 请求

发起 DELETE 请求需要传入请求的 URL。可以使用 axios.delete 方法来发起 DELETE 请求：

axios.delete('/users/1')
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.error(error)
  })

在上面的代码中，我们向 /users/1 发起了一个 DELETE 请求。如果请求成功，我们会打印响应数据。

处理响应

当 axios 发起请求后，会返回一个 Promise 对象，我们可以使用 then 和 catch 方法来处理响应。在 then 方法中，我们可以获得响应的数据、状态码等信息。

获得响应数据

在 then 方法中，我们可以使用 response.data 来获得响应数据：

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

在上面的代码中，我们在响应后打印了 response.data，这是一个包含响应数据的对象。

获得响应状态码

在 then 方法中，我们可以使用 response.status 来获得响应状态码：

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

在上面的代码中，我们在响应后打印了 response.status，这是一个表示状态码的数字。

获得响应头部信息

在 then 方法中，我们可以使用 response.headers 来获得响应头部信息：

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

在上面的代码中，我们在响应后打印了 response.headers，这是一个包含响应头部信息的对象。

实用技巧和最佳实践

在使用 axios 进行数据交互时，我们还需要注意一些实用技巧和最佳实践。

使用拦截器

axios 提供了拦截器功能，可以在请求和响应时进行一些处理。例如，可以在请求时添加请求头部信息，或在响应时进行统一的错误处理。

// www.javascriptcn.com code example
axios.interceptors.request.use(config => {
  const token = localStorage.getItem('access_token')
  if (token) {
    config.headers.common['Authorization'] = 'Bearer ' + token
  }
  return config
})

axios.interceptors.response.use(response => {
  return response
}, error => {
  if (error.response.status === 401) {
    // 处理未授权错误
  } else if (error.response.status === 404) {
    // 处理资源不存在错误
  } else {
    // 处理其他错误
  }
  return Promise.reject(error)
})

在上面的代码中，我们在请求和响应时分别使用了拦截器。在请求拦截器中，我们添加了 Authorization 请求头部信息；在响应拦截器中，我们进行了一些错误处理。

处理错误信息

在使用 axios 进行数据交互时，我们需要考虑如何处理错误信息。axios 返回的错误信息是一个包含错误码、错误信息等信息的对象。可以在 catch 方法中进行错误处理。

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

在上面的代码中，我们在 catch 方法中打印了错误码和错误信息。

封装 RESTful API

在实际项目中，我们通常需要封装 RESTful API，以便在项目中进行复用。可以使用 axios.create 方法来创建一个新的 axios 实例，并进行一些通用的配置。

// www.javascriptcn.com code example
const api = axios.create({
  baseURL: 'https://api.example.com',
  headers: {
    common: {
      'Authorization': 'Bearer ' + localStorage.getItem('access_token')
    }
  }
})

export default {
  getUsers () {
    return api.get('/users')
  },
  createUser (data) {
    return api.post('/users', data)
  },
  updateUser (id, data) {
    return api.put('/users/' + id, data)
  },
  deleteUser (id) {
    return api.delete('/users/' + id)
  }
}

在上面的代码中，我们创建了一个名为 api 的 axios 实例，并设置了 baseURL 和 Authorization 请求头部信息。然后，我们封装了一些 RESTful API，可以在项目中进行调用。

示例代码

最后，我们提供一个完整的示例代码，展示如何在 Vue.js 中使用 axios 进行数据交互。

// www.javascriptcn.com code example
<template>
  <div>
    <h1>Users</h1>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }} ({{ user.email }})
        <button @click="deleteUser(user.id)">Delete</button>
      </li>
    </ul>
    <form @submit.prevent="createUser">
      <input type="text" v-model="name" placeholder="Name">
      <input type="email" v-model="email" placeholder="Email">
      <button type="submit">Create</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      users: [],
      name: '',
      email: ''
    }
  },
  created () {
    axios.get('/users')
      .then(response => {
        this.users = response.data
      })
      .catch(error => {
        console.error(error)
      })
  },
  methods: {
    createUser () {
      axios.post('/users', {
        name: this.name,
        email: this.email
      })
        .then(response => {
          this.users.push(response.data)
          this.name = ''
          this.email = ''
        })
        .catch(error => {
          console.error(error)
        })
    },
    deleteUser (id) {
      axios.delete('/users/' + id)
        .then(response => {
          this.users = this.users.filter(user => user.id !== id)
        })
        .catch(error => {
          console.error(error)
        })
    }
  }
}
</script>

在上面的代码中，我们展示了一个简单的用户列表，可以进行创建和删除操作。在 created 钩子中，我们发起了一个 GET 请求，获取用户列表。在 createUser 和 deleteUser 方法中，我们分别发起了 POST 和 DELETE 请求，创建和删除用户。如果请求失败，我们会打印错误信息。

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

Vue.js 中使用 axios 进行数据交互