Fetch / Axios学习：新手入门教程-原创手记-慕课网

概述

本文详细介绍了Fetch与Axios的学习教程，涵盖了两者的简介、基础用法和异同点，帮助读者理解并掌握这些重要的网络请求技术。文中还提供了实战案例和常见问题的解决方法，旨在提高前端开发者的技能。Fetch / Axios学习过程中，你将学会如何在项目中使用这些工具来发送和处理网络请求。

Fetch与Axios学习：新手入门教程

Fetch与Axios简介

Fetch API简介

Fetch API 是一种用于发起网络请求的方法，用于替代 XMLHttpRequest。Fetch API 提供了一个更现代化的、基于 promise 的接口，可以更方便地处理异步操作。Fetch 支持多种 HTTP 方法，如 GET、POST、PUT、DELETE 等，并且可以处理各种 MIME 类型的数据。

Fetch API 的基本语法如下：

fetch(url, options)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

Axios框架介绍

Axios 是一个基于 promise 的 HTTP 库，可以非常方便地在浏览器和 Node.js 环境中使用。Axios 提供了更加丰富的功能，如拦截请求和响应、请求取消、自动转换 JSON 数据等。

Axios 的基本语法如下：

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

选择合适的工具

选择合适的工具取决于你的具体需求。如果你需要一个更现代、更简便的接口，Fetch API 可能更适合你。如果你需要更多的功能和更好的错误处理，Axios 可能更适合你。

Fetch API基础用法

GET请求

使用 Fetch API 发起 GET 请求的基本语法如下：

fetch(url)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

例如，假设我们有一个 API 可以返回一些数据：

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

POST请求

使用 Fetch API 发起 POST 请求的基本语法如下：

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

fetch(url, {
  method: 'POST',
  body: JSON.stringify(data),
  headers: {
    'Content-Type': 'application/json'
  }
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

例如，假设我们有一个 API 可以接收并处理 POST 请求：

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

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

处理响应

Fetch API 返回一个 Promise，该 Promise 会解析为一个 Response 对象。可以使用 Response 对象的方法来处理响应，例如：

response.json()：解析 JSON 数据
response.text()：获取文本数据
response.blob()：获取二进制数据

例如，假设我们有一个 API 返回 JSON 数据：

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

Axios基础用法

GET请求

使用 Axios 发起 GET 请求的基本语法如下：

axios.get(url)
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

例如，假设我们有一个 API 可以返回一些数据：

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

POST请求

使用 Axios 发起 POST 请求的基本语法如下：

axios.post(url, data, {
  headers: {
    'Content-Type': 'application/json'
  }
})
  .then(response => {
    console.log('Response:', response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

例如，假设我们有一个 API 可以接收并处理 POST 请求：

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

axios.post('https://api.example.com/user', data, {
  headers: {
    'Content-Type': 'application/json'
  }
})
  .then(response => {
    console.log('User created:', response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

配置请求头

Axios 允许你通过配置对象来设置请求头。例如，设置请求头的 Content-Type：

axios.post(url, data, {
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer your_token'
  }
})
  .then(response => {
    console.log('Response:', response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

Fetch与Axios的异同

同步与异步

Fetch API 和 Axios 都是基于 Promise 的，因此它们都是异步的。Fetch API 提供了更现代的 API 接口，而 Axios 则提供了更多的功能和更好的错误处理。

错误处理

Fetch API 的错误处理需要通过 Promise 的 catch 方法来实现：

fetch(url)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

Axios 的错误处理则是通过 Promise 的 catch 方法来实现，同时 Axios 还提供了一些额外的错误处理机制：

axios.get(url)
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

Axios 还支持拦截请求和响应，可以在请求和响应的生命周期中进行全局的错误处理：

axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response) {
      // 请求已发出，但服务器返回的响应状态码不在 2xx 范围内
      console.error('Error:', error.response.data);
    } else if (error.request) {
      // 请求已经发出，但没有收到响应
      console.error('Error:', error.request);
    } else {
      // 发送请求时发生了错误
      console.error('Error:', error.message);
    }
    return Promise.reject(error);
  }
);

兼容性问题

Fetch API 是一种现代的 API，但在一些旧版浏览器中可能不被支持。如果你需要在更广泛的浏览器环境中使用它，可能需要使用一些 polyfill 库，如 whatwg-fetch。

Axios 则支持更广泛的浏览器环境，包括旧版浏览器。如果你需要在更广泛的环境中使用，可以考虑使用 Axios。

示例代码

Fetch API 示例：

fetch(url)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

Axios 示例：

axios.get(url)
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

错误处理示例：

Fetch API 错误处理：

fetch(url)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

Axios 错误处理：

axios.get(url)
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

实战案例

使用Fetch获取数据

假设我们有一个 API 可以返回一些数据，我们可以使用 Fetch API 来获取这些数据：

fetch('https://api.example.com/weather')
  .then(response => response.json())
  .then(data => {
    console.log(data);
    document.querySelector('#weather').innerHTML = `Weather: ${data.temperature}`;
  })
  .catch(error => {
    console.error(error);
    document.querySelector('#weather').innerHTML = 'Error loading weather data';
  });

使用Axios发送表单数据

假设我们需要发送一个表单数据，我们可以使用 Axios 来发送这些数据：

<form id="myForm">
  <input type="text" id="username" name="username" placeholder="Username">
  <input type="password" id="password" name="password" placeholder="Password">
  <button type="submit">Submit</button>
</form>

document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault();
  const username = document.getElementById('username').value;
  const password = document.getElementById('password').value;

  axios.post('https://api.example.com/login', {
    username,
    password
  })
    .then(response => {
      console.log('Login successful:', response.data);
      document.querySelector('#loginStatus').innerHTML = 'Login successful';
    })
    .catch(error => {
      console.error('Login failed:', error);
      document.querySelector('#loginStatus').innerHTML = 'Login failed';
    });
});

项目实践

假设我们需要构建一个简单的天气应用，我们可以使用 Fetch API 来获取天气数据，并使用 Axios 来发送用户数据：

<!DOCTYPE html>
<html>
<head>
  <title>Weather App</title>
</head>
<body>
  <div id="weather"></div>
  <form id="myForm">
    <input type="text" id="username" name="username" placeholder="Username">
    <input type="password" id="password" name="password" placeholder="Password">
    <button type="submit">Submit</button>
  </form>
  <div id="loginStatus"></div>
  <script>
    fetch('https://api.example.com/weather')
      .then(response => response.json())
      .then(data => {
        document.querySelector('#weather').innerHTML = `Weather: ${data.temperature}`;
      })
      .catch(error => {
        console.error(error);
        document.querySelector('#weather').innerHTML = 'Error loading weather data';
      });

    document.getElementById('myForm').addEventListener('submit', function(event) {
      event.preventDefault();
      const username = document.getElementById('username').value;
      const password = document.getElementById('password').value;

      axios.post('https://api.example.com/login', {
        username,
        password
      })
        .then(response => {
          console.log('Login successful:', response.data);
          document.querySelector('#loginStatus').innerHTML = 'Login successful';
        })
        .catch(error => {
          console.error('Login failed:', error);
          document.querySelector('#loginStatus').innerHTML = 'Login failed';
        });
    });
  </script>
</body>
</html>

常见问题与解决方法

跨域问题

跨域问题是指浏览器的同源策略限制了不同域之间的请求。为了解决跨域问题，服务器端需要设置适当的 CORS（跨域资源共享）头。

例如，服务器端可以通过设置以下头部来允许跨域请求：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization

网络请求错误

网络请求错误通常包括连接错误、超时错误、服务器错误等。可以通过以下方法来处理这些错误：

检查网络连接：确保网络连接正常。
检查服务器状态：确保服务器正常运行。
检查请求参数：确保请求参数正确。

性能优化

性能优化可以通过以下方法来实现：

减少请求次数：合并多个请求以减少网络请求次数。
使用缓存：使用浏览器缓存或服务端缓存来减少重复请求。
减少数据传输量：压缩数据或只传输必要的数据。

例如，可以使用 axios.interceptors 来添加缓存拦截器：

axios.defaults.baseURL = 'https://api.example.com';

axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response) {
      // 请求已发出，但服务器返回的响应状态码不在 2xx 范围内
      console.error('Error:', error.response.data);
    } else {
      // 发送请求时发生了错误
      console.error('Error:', error.message);
    }
    return Promise.reject(error);
  }
);

axios.interceptors.request.use(config => {
  if (config.url in cache) {
    // 如果缓存中有数据，则直接返回缓存数据
    return Promise.resolve({ data: cache[config.url] });
  }
  return config;
});

axios.interceptors.response.use(response => {
  // 将响应数据缓存起来
  cache[response.config.url] = response.data;
  return response;
}, error => {
  console.error('Error:', error);
  return Promise.reject(error);
});

通过这些方法，你可以更好地理解和使用 Fetch API 和 Axios，提高你的前端开发技能。希望这篇教程对你有所帮助！