Vue.js 中配置 Axios：便捷的数据请求

2023-10-23 20:02:32

前言

在现代前端开发中，我们需要经常与服务器端进行数据交互，以便获取或更新数据。Axios 是一个非常流行的 JavaScript 库，它可以帮助我们轻松发起 HTTP 请求，获取数据并与 REST API 进行交互。在本文中，我们将学习如何在 Vue.js 项目中配置和使用 Axios 库。

安装 Axios

首先，我们需要在 Vue.js 项目中安装 Axios 库。我们可以使用 npm 或 yarn 来安装它。

$ npm install axios -S
$ yarn add axios -S

配置 Axios

在安装 Axios 库之后，我们需要在 Vue.js 项目中配置它。我们可以通过在 config 文件夹中创建一个 index.js 文件来配置它。

// config/index.js
import axios from 'axios'

const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer <YOUR_ACCESS_TOKEN>'
  }
})

export default instance

在上面的代码中，我们创建了一个 Axios 实例，并设置了一些默认配置，包括基本 URL、超时时间和请求头。您可以在此基础上进一步调整这些配置，以满足您的具体需求。

在 Vue.js 中使用 Axios

在配置好 Axios 之后，我们就可以在 Vue.js 中使用它来发起 HTTP 请求了。

// main.js
import axios from 'config/index'

new Vue({
  el: '#app',
  methods: {
    getData() {
      axios.get('/users')
        .then((response) => {
          console.log(response.data)
        })
        .catch((error) => {
          console.log(error)
        })
    }
  }
})