Vue.js 2.x 中使用 Axios 发起 HTTP 请求的方法-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要向服务器发起 HTTP 请求获取数据，这时候就需要使用到一个 HTTP 请求库。Axios 是一个流行的、基于 Promise 的 HTTP 请求库，可以用于浏览器和 Node.js 环境。在 Vue.js 2.x 中使用 Axios 发起 HTTP 请求也非常方便，本文将详细介绍 Axios 在 Vue.js 中的使用方法。

安装和导入 Axios

首先需要安装 Axios，可以使用 npm 或 yarn 安装：

npm install axios --save

# 或

yarn add axios

安装完成后，在需要使用 Axios 的地方导入：

import axios from 'axios';

发起 GET 请求

在 Vue.js 中使用 Axios 发起 GET 请求非常简单，只需要使用 axios.get 方法即可。axios.get 方法会返回一个 Promise，当请求成功时会调用 then 回调函数并传递响应数据，当请求失败时会调用 catch 回调函数并传递错误信息。

下面是一个示例代码：

// javascriptcn.com 代码示例
export default {
  data() {
    return {
      users: []
    };
  },
  mounted() {
    axios.get('/api/users')
      .then(response => {
        this.users = response.data;
      })
      .catch(error => {
        console.log(error);
      });
  }
}

发送的请求是 /api/users，在成功的回调函数中将响应数据保存在组件的 users 变量中。

发起 POST 请求

使用 Axios 发起 POST 请求也非常简单，只需要使用 axios.post 方法即可。axios.post 方法也会返回一个 Promise，当请求成功时会调用 then 回调函数并传递响应数据，当请求失败时会调用 catch 回调函数并传递错误信息。

下面是一个示例代码：

// javascriptcn.com 代码示例
export default {
  data() {
    return {
      user: {
        name: '',
        age: ''
      }
    };
  },
  methods: {
    createUser() {
      axios.post('/api/users', {
          name: this.user.name,
          age: this.user.age
        })
        .then(response => {
          console.log(response);
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
}

发送的请求是 /api/users，请求体是一个包含 name 和 age 字段的对象。

发起 PUT/DELETE 请求

Axios 也支持发起 PUT 和 DELETE 请求，分别使用 axios.put 和 axios.delete 方法。和 GET/POST 请求类似，这两个方法也会返回一个 Promise，成功回调函数和失败回调函数的逻辑也一样。

下面是一个示例代码：

// javascriptcn.com 代码示例
export default {
  methods: {
    updateUser(id, name, age) {
      axios.put(`/api/users/${id}`, {
          name: name,
          age: age
        })
        .then(response => {
          console.log(response);
        })
        .catch(error => {
          console.log(error);
        });
    },
    deleteUser(id) {
      axios.delete(`/api/users/${id}`)
        .then(response => {
          console.log(response);
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
}

设置请求头

有时候需要设置请求头，比如在发送授权请求时需要设置 Authorization 头。使用 Axios 设置请求头也非常简单，只需要在请求的配置对象中添加 headers 属性即可。

下面是一个示例代码：

axios.get('/api/users', {
  headers: {
    'Authorization': 'Bearer token'
  }
})

使用拦截器

Axios 支持使用拦截器，在请求发送之前和响应返回之后可以进行一些操作，比如设置请求头、添加 loading 等待动画等。拦截器可以在全局和局部使用。

下面是一个示例代码：

// javascriptcn.com 代码示例
// 添加全局拦截器
axios.interceptors.request.use(config => {
  // 在发送请求之前做些什么
  config.headers.Authorization = 'Bearer token';
  return config;
}, error => {
  // 处理请求错误
  return Promise.reject(error);
});

export default {
  mounted() {
    axios.get('/api/users')
      .then(response => {
        // 处理响应数据
      })
      .catch(error => {
        // 处理错误
      });
  }
}

使用 axios.interceptors.request.use 方法添加全局拦截器，可以在请求被发送之前对请求进行一些定制化操作。在请求成功或失败之后，可以使用 response 和 error 对象进行操作。

总结

Axios 不仅功能丰富，而且非常容易使用，可以极大地提高前端开发的效率和开发体验。本文介绍了 Axios 在 Vue.js 中的使用方法，今后在进行 Vue.js 开发时，可以使用 Axios 来方便地发起 HTTP 请求，这对于打造一个优秀的前端项目非常重要。

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