Axios库教程：快速上手的JavaScript HTTP库

Axios是一个基于Promise的JavaScript库，专为浏览器和Node.js设计，旨在简化HTTP请求处理。借助其简洁的API设计、高效性与对Promise的完美支持，Axios相比XMLHttpRequest提供了更高级的错误处理与更强大的请求配置选项。本文档全面覆盖了Axios的使用方法，助您高效地构建网络应用。

为在项目中使用Axios，请确保您已安装npm或yarn。以下是全局和本地环境下的安装命令：

全局安装

npm install axios
# 或使用 yarn
yarn add axios

本地安装

在项目目录中安装：

npm install axios --save
# 或使用 yarn
yarn add axios

配置Axios相对简单，主要涉及跨域、代理、请求拦截与响应拦截等方面的设置。通过配置axios.create()创建Axios实例，并传入自定义设置。以下示例展示了创建实例的基本配置：

import axios from 'axios';

// 创建一个默认实例
const axiosInstance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000, // 设置超时时间（毫秒）
  headers: {'Content-Type': 'application/json'},
  // 其他配置选项...
});

export default axiosInstance;

Axios提供多种方法来发送HTTP请求，包括GET、POST、PUT和DELETE等。

GET请求示例

使用axios.get()方法发送GET请求：

axios.get('/users')
  .then(response => {
    console.log('成功获取用户列表:', response.data);
  })
  .catch(error => {
    console.error('获取用户列表时出现错误:', error);
  });

POST请求示例

使用axios.post()方法发送POST请求，常用于创建资源：

const data = JSON.stringify({ username: 'newUser', password: 'newPassword' });
axios.post('/users', data)
  .then(response => {
    console.log('成功创建用户:', response.data);
  })
  .catch(error => {
    console.error('创建用户时出现错误:', error);
  });

PUT和DELETE请求的使用

PUT请求示例

const data = JSON.stringify({ name: 'updatedName' });
axios.put('/users/1', data)
  .then(response => {
    console.log('成功更新用户:', response.data);
  })
  .catch(error => {
    console.error('更新用户时出现错误:', error);
  });

DELETE请求示例

axios.delete('/users/1')
  .then(response => {
    console.log('成功删除用户:', response.data);
  })
  .catch(error => {
    console.error('删除用户时出现错误:', error);
  });

参数传递

在Axios的请求方法中，通过配置参数传递额外信息：

axios.get('/search', {
  params: {
    query: 'example',
    limit: 10
  }
})
  .then(response => {
    console.log('搜索结果:', response.data);
  })
  .catch(error => {
    console.error('搜索时出现错误:', error);
  });

错误处理

错误处理简洁明了：

axios.get('/error')
  .then(response => {
    console.log('成功获取数据:', response.data);
  })
  .catch(error => {
    if (error.response) {
      console.error('服务器响应错误:', error.response.status, error.response.data);
    } else if (error.request) {
      console.error('请求未发送:', error.request);
    } else {
      console.error('请求错误:', error.message);
    }
  });

请求拦截器

axiosInstance.interceptors.request.use(
  config => {
    // 在此添加处理请求的逻辑，例如添加JWT令牌到header
    config.headers.Authorization = 'Bearer ' + localStorage.getItem('token');
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

响应拦截器

axiosInstance.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    // 处理网络异常
    if (error.response.status === 401) {
      // 未授权，清除本地存储的令牌并重定向到登录页面
      localStorage.removeItem('token');
      // 示例代码，实际应用中应使用适当的路由逻辑
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

自定义响应处理

axiosInstance.get('/data')
  .then(response => {
    // 根据状态码执行相应操作
    if (response.status === 200) {
      console.log('成功获取数据:', response.data);
    } else if (response.status === 404) {
      console.error('请求的资源不存在');
    } else {
      console.error('未知错误');
    }
  })
  .catch(error => {
    console.error('请求失败:', error);
  });

创建一个简单的API调用应用

假设我们拥有一个RESTful API服务提供用户数据，可以构建一个小型应用来获取和显示用户列表：

const axiosInstance = axios.create({
  baseURL: 'https://api.example.com',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer ' + localStorage.getItem('token')
  }
});

function fetchUsers() {
  axiosInstance.get('/users')
    .then(response => {
      console.log('获取用户列表成功:', response.data);
      displayUsers(response.data);
    })
    .catch(error => {
      console.error('获取用户列表时出现错误:', error);
    });
}

function displayUsers(users) {
  // 在这里实现用户数据的显示逻辑
  console.log('显示用户列表:', users);
}

fetchUsers();

整合Axios与现代前端框架

假设我们使用Vue.js作为前端框架：

<!-- 在Vue.js组件中 -->
<template>
  <div>
    <button @click="fetchUsers">获取用户列表</button>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      users: []
    };
  },
  methods: {
    async fetchUsers() {
      try {
        const response = await axios.get('/users');
        this.users = response.data;
      } catch (error) {
        console.error('获取用户列表时出现错误:', error);
      }
    }
  }
};
</script>

通过以上指南与示例，您将掌握如何在项目中使用Axios来轻松发送HTTP请求、处理数据以及实现代理与自定义响应逻辑。