如何在 Vue.js SPA 应用中使用 Axios 进行数据请求

在 Vue.js 应用中，我们通常需要与后端进行数据交互。而 Axios 是一个非常流行的基于 Promise 的 HTTP 客户端，可以用于浏览器和 Node.js。本文将介绍如何在 Vue.js SPA 应用中使用 Axios 进行数据请求，包括 Axios 的基本使用方法、如何封装 Axios、如何使用拦截器等内容。

Axios 的基本使用方法

在 Vue.js 应用中使用 Axios，我们需要先安装 Axios：

npm install axios

然后在需要使用 Axios 的组件中引入：

import axios from 'axios'

接下来，我们可以使用 Axios 发送 GET、POST 等请求：

// javascriptcn.com 代码示例
axios.get('/api/user')
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.log(error)
  })

axios.post('/api/user', { name: 'John Doe' })
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.log(error)
  })

在以上示例中，我们使用 Axios 发送了 GET 和 POST 请求，并在 then 方法中处理响应数据，catch 方法中处理错误信息。

封装 Axios

在实际开发中，我们通常需要对 Axios 进行封装，以便于统一处理错误信息、添加请求头等操作。以下是一个简单的 Axios 封装示例：

// javascriptcn.com 代码示例
import axios from 'axios'

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000,
})

service.interceptors.request.use(
  config => {
    // 添加请求头等操作
    return config
  },
  error => {
    console.log(error)
    return Promise.reject(error)
  }
)

service.interceptors.response.use(
  response => {
    const res = response.data
    if (res.code !== 200) {
      console.log(res.message)
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    console.log(error)
    return Promise.reject(error)
  }
)

export default service

在以上示例中，我们使用了 Axios 的 create 方法创建了一个实例，然后使用 interceptors 属性添加了请求拦截器和响应拦截器。在请求拦截器中，我们可以对请求进行一些操作，比如添加请求头等操作。在响应拦截器中，我们可以统一处理错误信息等操作。

使用封装的 Axios

在封装好 Axios 后，我们可以在组件中使用封装后的 Axios：

// javascriptcn.com 代码示例
import request from '@/utils/request'

export default {
  data() {
    return {
      users: [],
    }
  },
  mounted() {
    this.fetchUsers()
  },
  methods: {
    fetchUsers() {
      request.get('/api/users')
        .then(response => {
          this.users = response.data
        })
        .catch(error => {
          console.log(error)
        })
    },
  },
}

在以上示例中，我们使用了封装后的 Axios 发送了 GET 请求，并在 then 方法中处理响应数据，catch 方法中处理错误信息。

总结

在 Vue.js SPA 应用中使用 Axios 进行数据请求可以方便地与后端进行数据交互。在实际开发中，我们通常需要对 Axios 进行封装，以便于统一处理错误信息、添加请求头等操作。本文介绍了 Axios 的基本使用方法、如何封装 Axios、如何使用拦截器等内容，希望能够对你有所帮助。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/655c0164d2f5e1655d611ee5