博客

axios简单介绍

  • Post category:other

axios简单介绍

Axios是一个基于Promise的HTTP客户端，用于浏览器和Node.js。它可以在浏览器中发送异步请求，也可以在Node.js中发送HTTP请求。Axios支持拦截请求和响应，以及转换请求和响应数据。本攻略将介绍Axios的基本用法和常见功能。

安装Axios

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

npm install axios

或者

yarn add axios

发送GET请求

以下是使用Axios发送GET请求的示例代码：

import axios from 'axios';

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

在上述代码中，我们使用Axios发送了一个GET请求，请求的URL是/api/users。当请求成功时，我们使用then()方法获取响应数据，并将其打印到控制台中。当请求失败时，我们使用catch()方法获取错误信息，并将其打印到控制台中。

发送POST请求

以下是使用Axios发送POST请求的示例代码：

import axios from 'axios';

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

在上述代码中，我们使用Axios发送了一个POST请求，请求的URL是/api/users。我们还向请求中添加了一个JSON对象，包含了name和age属性。当请求成功时，我们使用then()方法获取响应数据，并将其打印到控制台中。当请求失败时，我们使用catch()方法获取错误信息，并将其打印到控制台中。

拦截请求和响应

Axios支持拦截请求和响应，可以在请求或响应被发送或接收之前对它们进行处理。以下是使用Axios拦截请求和响应的示例代码：

import axios from 'axios';

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

// 添加响应拦截器
axios.interceptors.response.use(response => {
  // 对响应数据做点什么
  console.log('响应拦截器');
  return response;
}, error => {
  // 对响应错误做点什么
  return Promise.reject(error);
});

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

在上述代码中，我们使用Axios添加了请求拦截器和响应拦截器。请求截器会在发送请求之前被调用，响应拦截器会在接收到响应之后被调用。在拦截器中，我们可以对请求或响应进行处理，例如添加请求头或对响应数据进行转换。

总结

Axios是一个基于Promise的HTTP客户端，用于浏览器和Node.js。它支持发送异步请求、拦截请求和响应、转换请求和响应数据等功能。通过本攻略，我们了解了Axios的基本用法和常见功能，包括发送GET请求、发送POST请求、拦截请求和响应等。

示例1：使用Axios发送GET请求

以下是一个示例，演示如何使用Axios发送GET请求：

import axios from 'axios';

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

在上述代码中，我们使用Axios发送了一个GET请求，请求的URL是/api/users。当请求成功时，我们使用then()方法获取响应数据，并将其打印到控制台中。当请求失败时，我们使用catch()方法获取错误信息，并将其打印到控制台中。

示例2：使用Axios发送POST请求

以下是一个示例，演示如何使用Axios发送POST请求：

import axios from 'axios';

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

在上述代码中，我们使用Axios发送了一个POST请求，请求的URL是/api/users。我们还向请求中添加了一个JSON对象，包含了name和age属性。当请求成功时，我们使用then()方法获取响应数据，并将其打印到控制台中。当请求失败时，我们使用catch()方法获取错误信息，并将其打印到控制台中。

Tags: