Fetch / Axios课程：初学者必看的网络请求教程

本文全面介绍了Fetch和Axios在网络请求中的区别与联系，强调了学习Fetch和Axios课程的重要性。通过Fetch和Axios的基本语法、发送GET和POST请求、处理响应和错误等内容，帮助读者掌握网络请求的核心技能。文章还深入讲解了取消请求、拦截器和文件上传与下载等高级功能，使读者能够更好地应用这些技术。

网络请求是现代Web开发的重要组成部分，它允许前端应用与后端服务进行通信。无论是获取数据、提交表单还是上传文件，都需要借助网络请求来实现。本节将介绍网络请求的基本概念，并解释Fetch和Axios的区别与联系，以及学习它们的重要性。

网络请求通常指的是客户端（如浏览器）与服务器之间进行数据交换的过程。在网络请求中，浏览器发送HTTP请求到服务器，服务器响应HTTP响应，其中包含请求的数据或错误信息。

网络请求可以分为两类：

1. 同步请求：请求会在当前线程中阻塞，直到收到响应。这种请求很少在现代Web应用中使用，因为它会导致用户界面无响应。
2. 异步请求：请求不会阻塞当前线程，而是通过回调、Promise或异步函数来处理响应。异步请求是当前Web开发中最常见的请求方式。

Fetch和Axios概述

Fetch是浏览器内置的API，提供了一种更简单、更直观的方式来发送网络请求。Fetch使用Promise来处理异步操作，并且支持多种HTTP请求方法（如GET、POST、PUT、DELETE等）。

Axios是一个基于Promise的HTTP客户端，主要用于浏览器和Node.js环境中。Axios提供了更强大的功能，如拦截请求和响应、跨域配置、取消请求等。

区别

• 内置性：Fetch是浏览器内置的API，不需要额外引入库。而Axios需要通过CDN引入或在模块中引入。
• 功能：Axios提供了更多的功能，如拦截请求和响应、设置超时、跨域配置等。Fetch虽然功能相对简单，但可以通过Promise和一些额外的库来实现类似的高级功能。
• 兼容性：Fetch在所有现代浏览器中都得到了广泛支持，但某些旧版本的浏览器可能需要使用polyfill。Axios则兼容更多浏览器，包括老版本的浏览器。

联系

• Promise：Fetch和Axios都使用Promise来处理异步操作。
• 网络请求：两者的目的是为了向服务器发送网络请求并获取响应。

• 获取数据：无论是获取JSON数据、图片还是其他资源，都需要掌握网络请求。
• 发送数据：发送表单数据、文件上传等操作都需要通过网络请求来实现。
• 性能优化：了解如何发送网络请求有助于优化应用的性能和用户体验。
• 前端开发必备技能：现代前端开发离不开网络请求的使用，无论是使用Fetch还是Axios，都需要掌握其基本用法。

Fetch是浏览器提供的内置API，用于发送网络请求。它使用Promise来处理异步操作，支持多种HTTP请求方法（如GET、POST、PUT、DELETE等）。

Fetch的基本语法如下：

fetch(url, options)

• url：请求的目标URL。
• options：一个可选的配置对象，用于指定请求参数，如method、headers、body等。

Fetch返回一个Promise，解析为Response对象。

fetch('https://example.com/api/data')
    .then(response => {
        // 处理响应
    })
    .catch(error => {
        // 处理错误
    });

发送GET请求时，只需要提供URL即可。GET请求用于从服务器获取数据。

fetch('https://jsonplaceholder.typicode.com/todos/1')
    .then(response => {
        if (response.ok) {
            return response.json(); // 解析JSON响应
        }
        throw new Error('Network response was not ok'); // 处理错误响应
    })
    .then(data => {
        console.log(data); // 打印返回的数据
    })
    .catch(error => {
        console.error('Error:', error); // 处理错误
    });

发送POST请求需要在options对象中指定method和body。POST请求通常用于提交数据，如表单提交或文件上传。

const formData = new FormData();
formData.append('name', 'John Doe');
formData.append('age', 30);

fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    body: formData
})
    .then(response => {
        if (response.ok) {
            return response.json(); // 解析JSON响应
        }
        throw new Error('Network response was not ok'); // 处理错误响应
    })
    .then(data => {
        console.log(data); // 打印返回的数据
    })
    .catch(error => {
        console.error('Error:', error); // 处理错误
    });

Fetch的响应对象提供了多种方法来处理响应，包括json()、text()和blob()等。

fetch('https://jsonplaceholder.typicode.com/todos/1')
    .then(response => {
        if (response.ok) {
            return response.json(); // 解析JSON响应
        }
        throw new Error('Network response was not ok'); // 处理错误响应
    })
    .then(data => {
        console.log('Data:', data); // 打印返回的数据
    })
    .catch(error => {
        console.error('Error:', error); // 处理错误
    });

错误处理可以通过catch方法来完成。

Axios是一个基于Promise的HTTP客户端，用于浏览器和Node.js环境中。Axios提供了更强大的功能，如拦截请求和响应、设置超时、跨域配置等。

Axios的基本语法如下：

axios(url, options)

• url：请求的目标URL。
• options：一个可选的配置对象，用于指定请求参数，如method、headers、data等。

Axios返回一个Promise，解析为响应对象。

axios('https://example.com/api/data')
    .then(response => {
        // 处理响应
    })
    .catch(error => {
        // 处理错误
    });

发送GET请求时，只需要提供URL即可。GET请求用于从服务器获取数据。

axios.get('https://jsonplaceholder.typicode.com/todos/1')
    .then(response => {
        console.log('Data:', response.data); // 打印返回的数据
    })
    .catch(error => {
        console.error('Error:', error); // 处理错误
    });

发送POST请求需要在options对象中指定method和data。POST请求通常用于提交数据，如表单提交或文件上传。

axios.post('https://jsonplaceholder.typicode.com/posts', {
    name: 'John Doe',
    age: 30
})
    .then(response => {
        console.log('Data:', response.data); // 打印返回的数据
    })
    .catch(error => {
        console.error('Error:', error); // 处理错误
    });

在发送请求时，可以通过options对象传递参数和设置头部信息。

axios.get('https://jsonplaceholder.typicode.com/todos/1', {
    params: {
        userId: 1
    },
    headers: {
        'Content-Type': 'application/json'
    }
})
    .then(response => {
        console.log('Data:', response.data); // 打印返回的数据
    })
    .catch(error => {
        console.error('Error:', error); // 处理错误
    });

Axios的响应对象提供了多种方法来处理响应，包括data、status、headers等。

axios.get('https://jsonplaceholder.typicode.com/todos/1')
    .then(response => {
        console.log('Data:', response.data); // 打印返回的数据
        console.log('Status:', response.status); // 打印返回的状态码
        console.log('Headers:', response.headers); // 打印返回的头部信息
    })
    .catch(error => {
        console.error('Error:', error); // 处理错误
    });

错误处理可以通过catch方法来完成。

除了基本的使用方法，Fetch和Axios还提供了多种高级功能，如使用Promise链、取消请求、拦截器、文件上传与下载等。

使用Promise链可以更优雅地处理多个异步操作。可以通过then方法链式调用来实现。

fetch('https://jsonplaceholder.typicode.com/todos/1')
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => {
        console.log('Data:', data);
    })
    .catch(error => {
        console.error('Error:', error);
    });

取消请求是Web开发中常见的需求，特别是在用户频繁切换页面或快速导航时。Fetch和Axios都提供了取消请求的方法。

Fetch

通过AbortController API来实现取消请求。

const controller = new AbortController();
const signal = controller.signal;

fetch('https://jsonplaceholder.typicode.com/todos/1', { signal })
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => {
        console.log('Data:', data);
    })
    .catch(error => {
        if (error.name === 'AbortError') {
            console.log('Request was cancelled');
        } else {
            console.error('Error:', error);
        }
    });

// 取消请求
controller.abort();

Axios

使用CancelToken API来实现取消请求。

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('https://jsonplaceholder.typicode.com/todos/1', {
    cancelToken: source.cancel
})
    .then(response => {
        console.log('Data:', response.data);
    })
    .catch(error => {
        if (axios.isCancel(error)) {
            console.log('Request was cancelled', error.message);
        } else {
            console.error('Error:', error);
        }
    });

// 取消请求
source.cancel('Operation cancelled by the user.');

拦截器允许在发送或接收请求之前进行一些操作，如添加认证信息、日志记录等。

Fetch

可以通过中间件来实现拦截器。

const fetchWithInterceptors = fetch.bind(window);

const intercept = new Proxy(fetchWithInterceptors, {
    apply: function(target, thisArg, args) {
        const [url, options] = args;

        console.log('Request URL:', url); // 打印请求URL
        console.log('Request Headers:', options.headers); // 打印请求头

        return Reflect.apply(target, thisArg, args);
    }
});

intercept('https://jsonplaceholder.typicode.com/todos/1')
    .then(response => {
        if (response.ok) {
            return response.json();
        }
        throw new Error('Network response was not ok');
    })
    .then(data => {
        console.log('Data:', data);
    })
    .catch(error => {
        console.error('Error:', error);
    });

Axios

使用Axios的interceptors API来实现拦截器。

axios.interceptors.request.use(config => {
    console.log('Request URL:', config.url); // 打印请求URL
    console.log('Request Headers:', config.headers); // 打印请求头

    return config;
}, error => {
    console.error('Request error:', error);
    return Promise.reject(error);
});

axios.interceptors.response.use(response => {
    console.log('Response Status:', response.status); // 打印响应状态码
    console.log('Response Headers:', response.headers); // 打印响应头

    return response;
}, error => {
    console.error('Response error:', error);
    return Promise.reject(error);
});

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

文件上传

文件上传通常通过POST请求实现，可以通过FormData对象来构造上传的数据。

const input = document.getElementById('file-input');
const file = input.files[0];

const formData = new FormData();
formData.append('file', file);

axios.post('https://jsonplaceholder.typicode.com/posts', formData, {
    headers: {
        'Content-Type': 'multipart/form-data'
    }
})
    .then(response => {
        console.log('Upload success:', response.data);
    })
    .catch(error => {
        console.error('Upload error:', error);
    });

文件下载

文件下载可以通过GET请求实现，服务器返回的响应体通常是一个文件流。

axios({
    method: 'get',
    url: 'https://jsonplaceholder.typicode.com/todos/1',
    responseType: 'blob'  // 设置响应类型为blob
})
    .then(response => {
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const a = document.createElement('a');
        a.href = url;
        a.download = 'file.json';
        document.body.appendChild(a);
        a.click();
    })
    .catch(error => {
        console.error('Download error:', error);
    });