博客

axios详解

  • Post category:other

axios详解

Axios是一个基于Promise的HTTP客户端，用于浏览器和Node.js。它可以在浏览器中发送异步请求，也可以在Node.js中发送HTTP请求。Axios具有以下特点：

  • 支持Promise API
  • 支持拦截请求和响应
  • 支持取消请求
  • 自动转换JSON数据
  • 支持客户端防XSRF

安装

在使用Axios之前，我们需要先安装它。可以使用npm或yarn进行安装：

npm install axios

或者

yarn add axios

发送请求

使用Axios发送请求非常简单。以下是使用Axios发送GET请求的示例：

import axios from 'axios';

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

在上面的代码中，我们首先导入Axios模块。然后，我们使用axios.get()方法发送一个GET请求，该请求将请求URL设置为/api/users。在请求成功时，我们使用response.data访问应数据。在请求失败时，我们使用error访问错误信息。

以下是一个使用Axios发送POST请求的示例：

import axios from 'axios';

axios.post('/api/users', {
  firstName: 'John',
  lastName: 'Doe'
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

在上面的代码中，我们使用axios.post()方法发送一个POST请求，该请求将请求URL设置为/api/users。我们还将一个包含firstName和lastName属性的对象作为请求体发送。在请求成功时，我们使用response.data访问响应数据。在请求失败时我们使用error访问错误信息。

拦截请求和响应

Axios允许我们拦截请求和响应，并在它们被发送或接收之前对它们修改。以下是一个拦截请求的示例：

import axios from 'axios';

axios.interceptors.request.use(config => {
  // 在请求发送之前做些什么
  return config;
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error);
});

在上面的代码中，我们使用axios.interceptors.request.use()方法拦截请求，并在请求发送之前对请求进行修改。我们可以在config对象上添加或修改请求头、请求参数等。如果请求失败，我们可以使用Promise.reject()方法将错误传递给下一个拦截器或请求。

以下是一个拦截响应的示例：

import axios from 'axios';

axios.interceptors.response.use(response => {
  // 对响应数据做些什么
  return response;
}, error => {
  // 对响应错误做些什么
  return Promise.reject(error);
});

在上面的代码中，我们使用axios.interceptors.response.use()方法拦截响应，并在响应被接收之前对响应进行修改。我们可以在response对象上添加或修改响应头、响应数据等。如果响应失败，我们可以使用Promise.reject()方法将错误传递给下一个拦截器或请求。

取消请求

Axios允许我们取消请求。以下是一个取消请求的示例：

import axios from 'axios';

const source = axios.CancelToken.source();

axios.get('/api/users', {
  cancelToken: source.token
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (axios.isCancel(error)) {
      console.log('请求已取消：', error.message);
    } else {
      console.log(error);
    }
  });

// 取消请求
source.cancel('用户取消了请求');

在上面的代码中，我们首先创建了一个CancelToken对象source。然，我们使用source.token将CancelToken对象传递给请求配置中的cancelToken属性。在请求成功时，我们使用response.data访问响应数据。在请求失败时，我们使用axios.isCancel()检查错误是否是由取消请求引起的。如果是，我们将输出一个取消请求的消息。最后，我们使用source.cancel()方法取消请求，并将取消请求的原因传递给它。

自动转换JSON数据

Axios可以自动将JSON数据转换为JavaScript对象。以下是一个自动转换JSON数据的示例：

import axios from 'axios';

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

在上面的代码中，我们使用axios.get()方法发送一个GET请求，并在请求成功时使用response.data访问响应数据。Axios将自动将JSON数据转换为JavaScript对象。

客户端防御XSRF

Axios可以帮助我们防御XSRF攻击。以下是一个防御XSRF攻击的示例：

import axios from 'axios';

const instance = axios.create({
  xsrfCookieName: 'mytoken',
  xsrfHeaderName: 'X-CSRF-TOKEN'
});

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

在上面的代码中，我们首先使用axios.create()方法创建一个Axios实例。然后，我们使用xsrfCookieName和xsrfHeaderName属性指定XSRF令牌的cookie名称和请求头名称。在发送请求时，Axios将自动从cookie中获取XSRF令牌，并将其添加到请求头中。

结论

在本文中，我们详细讲解了Axios的使用方法。我们提供了多个示例，演示了如何发送GET和POST请求，如何拦截请求和响应，如何取消请求，如何自动转换JSON数据，以及如何防御XSRF攻击。Axios是一个功能强大的HTTP客户端，可以帮助我们轻松地发送HTTP请求并处理响应。

Tags: