Axios用法详解

简介

Axios是一个基于Promise的HTTP客户端，用于浏览器和Node.js中。它具有简洁、高效、易用的特点，可以帮助我们更好地发起HTTP请求。

Axios支持浏览器和Node.js两种环境，并且可以拦截请求和响应、自定义请求头、转换请求数据和响应数据等功能。

Axios的特点包括：

支持浏览器和Node.js。
基于Promise的API。
支持请求和响应的拦截。
支持请求和响应的转换。
自动转换JSON数据。
可以取消请求。
安全、简单、高效、易用。

安装

我们可以使用npm来安装Axios：

shellCopy code
npm install axios

使用方法

发起GET请求

发起一个简单的GET请求：

javascriptCopy code
import axios from 'axios';

axios.get('/user?id=12345')
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.log(error);
  });

使用async/await语法：

javascriptCopy code
import axios from 'axios';

async function getUser() {
  try {
    const response = await axios.get('/user?id=12345');
    console.log(response);
  } catch (error) {
    console.log(error);
  }
}

发起POST请求

发起一个简单的POST请求：

javascriptCopy code
import axios from 'axios';

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

使用async/await语法：

javascriptCopy code
import axios from 'axios';

async function createUser() {
  try {
    const response = await axios.post('/user', {
      firstName: 'John',
      lastName: 'Doe'
    });
    console.log(response);
  } catch (error) {
    console.log(error);
  }
}

自定义配置

我们可以通过传递一个配置对象来自定义Axios的配置：

javascriptCopy code
import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

instance.get('/user?id=12345')
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.log(error);
  });

错误处理

Axios可以帮助我们处理错误。例如，在发起一个请求时，如果发生错误，我们可以在.catch()块中进行处理：

javascriptCopy code
import axios from 'axios';

axios.get('/user?id=12345')
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    if (error.response) {
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      console.log(error.request);
    } else {
      console.log('Error', error.message);
    }

Axios入门指南：如何在JavaScript中使用它