Fetch / Axios项目实战：新手指南-原创手记-慕课网

概述

本文详细介绍了Fetch和Axios两个库的使用方法，并通过实战项目演示了如何使用它们进行网络请求。文章涵盖了Fetch与Axios的基础使用、GET和POST请求的发送，以及如何处理响应数据。通过实际操作，读者可以深入了解Fetch / Axios项目实战的全过程。

Fetch与Axios简介

Fetch API简介

Fetch API 是浏览器内置的标准接口，用于发起网络请求。它返回一个 Promise 对象，可以处理异步请求的结果。Fetch API 提供了更强大的功能，如请求和响应的流式处理。Fetch API 支持 HTTP 协议，可以与服务端进行数据交换。

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Axios简介

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js。它支持拦截请求和响应、转换请求和响应数据、自动转换 JSON 数据、处理浏览器和 Node.js 的 CORS 问题。Axios 是一个广泛使用的库，因为它具有良好的跨平台支持和易于使用的 API。

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

Fetch与Axios的区别和联系

区别：
- Fetch API 是浏览器内置，而 Axios 是第三方库。
- Fetch API 使用 Promise，Axios 也使用 Promise，但 Axios 的 API 设计更直观。
- Fetch API 不支持浏览器的自动 JSON 转换，而 Axios 会自动解析 JSON 数据。
- Axios 提供了更丰富的功能，如请求和响应拦截、取消请求等。
联系：
- 两者都可以发起 GET 和 POST 请求。
- 都可以处理响应和错误。

环境搭建

创建项目

创建一个新的项目目录，并初始化一个新的 Node.js 项目。

mkdir my-project
cd my-project
npm init -y

初始化完成后，可以通过 cat package.json 查看生成的 package.json 文件内容。

cat package.json

安装Axios

使用 npm 安装 Axios。

npm install axios

安装完成后，可以通过以下代码验证 Axios 是否安装成功：

const axios = require('axios');
console.log('Axios is installed and working');

Fetch基础使用

GET请求

Fetch API 可以通过 fetch 函数发起 GET 请求。fetch 函数返回一个 Promise，解析响应时可以调用 .then 方法。

fetch('https://api.example.com/data')
  .then(response => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('Network response was not ok');
    }
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

POST请求

Fetch API 发送 POST 请求需要设置请求体，可以通过设置 body 参数来实现。JSON.stringify 用于将 JavaScript 对象转换为 JSON 字符串。

const data = {
  name: 'John Doe',
  age: 30
};

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})
  .then(response => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('Network response was not ok');
    }
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

处理响应

Fetch API 返回的响应对象 Response 可以通过 .json() 方法来解析 JSON 数据。.json() 返回一个 Promise，解析成功后可以获取到解析后的数据。

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
    // 处理数据
  })
  .catch(error => console.error('Error:', error));

Axios基础使用

GET请求

Axios 发送 GET 请求非常简单，使用 axios.get 方法即可。axios.get 返回一个 Promise，可以通过 .then 方法处理响应数据。

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

POST请求

Axios 发送 POST 请求也需要设置请求体，可以通过 axios.post 方法来实现。Axios 自动解析 JSON 数据，无需手动转换。

const data = {
  name: 'John Doe',
  age: 30
};

axios.post('https://api.example.com/data', data)
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

处理响应

Axios 发送的请求返回的数据可以通过 .then 方法处理，响应对象 response 包含 data、status、statusText、headers 和 config 等属性。

axios.post('https://api.example.com/data', data)
  .then(response => {
    console.log(response.data);
    // 处理数据
  })
  .catch(error => {
    console.error('Error:', error);
  });

实战演练：使用Fetch/Axios与API交互

选择API

为了演示数据交互，我们选择了一个公开的 API：JSONPlaceholder。它提供了一些示例的 REST API，可以用来测试各种 HTTP 请求。

https://jsonplaceholder.typicode.com

发送GET请求获取数据

使用Fetch

使用 Fetch API 发送 GET 请求来获取用户列表。

fetch('https://jsonplaceholder.typicode.com/users')
  .then(response => response.json())
  .then(users => {
    console.log(users);
  })
  .catch(error => console.error('Error:', error));

使用Axios

使用 Axios 发送 GET 请求来获取用户列表。

axios.get('https://jsonplaceholder.typicode.com/users')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

发送POST请求提交数据

使用Fetch

使用 Fetch API 发送 POST 请求来提交数据，这里我们提交一个用户。

const userData = {
  name: 'Jane Doe',
  username: 'johndoe',
  email: 'jane.doe@example.com',
  address: {
    street: '123 Main St',
    suite: 'Apt 12',
    city: 'Anytown',
    zipcode: '12345'
  },
  phone: '123-456-7890',
  website: 'johndoe.com',
  company: {
    name: 'ACME Corp',
    catchPhrase: 'Innovating since 1999',
    bs: 'world-class solutions'
  }
};

fetch('https://jsonplaceholder.typicode.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(userData)
})
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => console.error('Error:', error));

使用Axios

使用 Axios 发送 POST 请求来提交数据，这里我们提交一个用户。

const userData = {
  name: 'Jane Doe',
  username: 'johndoe',
  email: 'jane.doe@example.com',
  address: {
    street: '123 Main St',
    suite: 'Apt 12',
    city: 'Anytown',
    zipcode: '12345'
  },
  phone: '123-456-7890',
  website: 'johndoe.com',
  company: {
    name: 'ACME Corp',
    catchPhrase: 'Innovating since 1999',
    bs: 'world-class solutions'
  }
};

axios.post('https://jsonplaceholder.typicode.com/users', userData)
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

常见问题与解决方案

网络请求失败

问题：请求网络失败，出现 Network Error。
解决方法：检查网络连接，确保目标 URL 是正确的。
示例代码：

axios.get('https://example.invalid')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

CORS 错误

问题：请求时出现 Access to XMLHttpRequest at '...' from origin '...' has been blocked by CORS policy。
解决方法：检查目标服务器是否允许跨域请求。如果服务器不支持 CORS，请使用代理服务器。
示例代码：

axios.get('https://api.example.com/data', {
  headers: {
    'Access-Control-Allow-Origin': '*'
  }
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

JSON 解析错误

问题：请求返回的数据不是 JSON 格式，解析时出现错误。
解决方法：检查返回的数据格式，确保服务器返回的是 JSON 格式的数据。
示例代码：

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => console.error('Error:', error));

提高代码可读性和可维护性的技巧

抽取公共代码

将公共代码抽取到一个单独的函数中，避免重复代码。

const fetchJson = async (url) => {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
};

fetchJson('https://api.example.com/data')
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

使用错误处理

在代码中添加适当的错误处理，确保错误可以被捕获和处理。

axios.post('https://jsonplaceholder.typicode.com/users', userData)
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
    if (error.response) {
      console.error('Status:', error.response.status);
      console.error('Data:', error.response.data);
      console.error('Headers:', error.response.headers);
    } else if (error.request) {
      console.error('No response received');
    } else {
      console.error('Something went wrong', error.message);
    }
  });

使用配置对象

使用配置对象来设置请求参数，使得代码更清晰和可维护。

const config = {
  headers: {
    'Content-Type': 'application/json'
  },
  timeout: 10000
};

axios.post('https://jsonplaceholder.typicode.com/users', userData, config)
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

使用接口定义

定义一个接口来描述请求和响应的数据结构，可以提高代码的可读性和可维护性。

interface User {
  id: number;
  name: string;
  username: string;
  email: string;
  address: {
    street: string;
    suite: string;
    city: string;
    zipcode: string;
  };
  phone: string;
  website: string;
  company: {
    name: string;
    catchPhrase: string;
    bs: string;
  };
}

axios.post<User>('https://jsonplaceholder.typicode.com/users', userData)
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

通过以上示例和技巧，你可以更有效地使用 Fetch 和 Axios 进行网络请求，提高代码的质量和可维护性。如果你需要更深入地了解或学习更多内容，可以参考慕课网（https://www.imooc.com/）提供的教程。