MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

Vue项目集成Fetch API实现网络请求

2021-04-196.8k 阅读

一、理解 Fetch API

在深入探讨如何在 Vue 项目中集成 Fetch API 之前，我们先来深入理解一下 Fetch API 本身。Fetch API 是现代浏览器提供的一种用于进行网络请求的接口，它基于 Promise 实现，相比于传统的 XMLHttpRequest 对象，具有更简洁、更现代化的语法，并且支持更强大的功能。

1.1 Fetch API 的基本语法

Fetch API 的核心是 fetch() 函数，它接受一个参数，即请求的 URL，返回一个 Promise，该 Promise 在请求完成（无论是成功还是失败）时被解决。基本的 GET 请求示例如下：

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

在上述代码中：

  • fetch('https://example.com/api/data') 发起一个 GET 请求到指定的 URL。
  • .then(response => response.json()) 处理响应。response 对象包含了服务器返回的所有信息，response.json() 方法将响应体解析为 JSON 格式的数据。如果服务器返回的是文本数据，可以使用 response.text()；如果是二进制数据，可以使用 response.blob() 等方法。
  • .then(data => console.log(data)) 这里的 data 就是解析后的 JSON 数据，我们可以对其进行进一步处理，这里只是简单地打印到控制台。
  • .catch(error => console.error('Error:', error)) 捕获请求过程中发生的任何错误，并打印错误信息。

1.2 Fetch API 的请求配置

fetch() 函数还可以接受第二个参数，用于配置请求的各种选项，如请求方法、请求头、请求体等。以下是一个 POST 请求的示例：

const dataToSend = {
  key1: 'value1',
  key2: 'value2'
};
fetch('https://example.com/api/submit', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(dataToSend)
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

在这个示例中：

  • method: 'POST' 指定请求方法为 POST。
  • headers 对象设置了请求头，这里设置 Content-Type 为 application/json，表示请求体的数据格式为 JSON。
  • body: JSON.stringify(dataToSend) 将 JavaScript 对象 dataToSend 转换为 JSON 字符串作为请求体发送。

二、Vue 项目基础设置

在开始集成 Fetch API 之前，我们需要先创建一个 Vue 项目，并了解一些基础设置。

2.1 创建 Vue 项目

我们可以使用 Vue CLI 来快速创建一个新的 Vue 项目。首先确保你已经全局安装了 Vue CLI：

npm install -g @vue/cli

然后使用以下命令创建一个新项目：

vue create vue-fetch-demo

按照提示选择合适的预设选项，等待项目创建完成。

2.2 项目结构介绍

创建完成后，进入项目目录：

cd vue-fetch-demo

项目的基本结构如下：

├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   ├── App.vue
│   ├── main.js
│   └── router.js
├── babel.config.js
├── package.json
├── README.md
└── yarn.lock
  • public 目录：包含项目的静态资源，如 index.html 是项目的入口 HTML 文件。
  • src 目录：是项目的源代码目录。
    • assets 目录：存放静态资源，如图片等。
    • components 目录：存放 Vue 组件。
    • App.vue 是项目的根组件。
    • main.js 是项目的入口 JavaScript 文件，用于创建 Vue 实例并挂载到 DOM 上。
    • router.js 用于配置路由（如果项目使用了路由）。

三、在 Vue 组件中使用 Fetch API

现在我们已经了解了 Fetch API 和 Vue 项目的基础，接下来看看如何在 Vue 组件中使用 Fetch API 进行网络请求。

3.1 在组件中发起 GET 请求

假设我们有一个需求，要从服务器获取一些文章列表数据并在页面上展示。我们可以创建一个新的 Vue 组件 ArticleList.vue：

<template>
  <div>
    <h1>文章列表</h1>
    <ul>
      <li v-for="article in articles" :key="article.id">
        {{ article.title }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      articles: []
    };
  },
  mounted() {
    this.fetchArticles();
  },
  methods: {
    async fetchArticles() {
      try {
        const response = await fetch('https://example.com/api/articles');
        const data = await response.json();
        this.articles = data;
      } catch (error) {
        console.error('获取文章列表失败:', error);
      }
    }
  }
};
</script>

在上述代码中：

  • data() 函数返回一个对象，其中 articles 数组用于存储从服务器获取的文章数据。
  • mounted() 钩子函数在组件挂载到 DOM 后被调用，在这里我们调用 fetchArticles() 方法发起网络请求。
  • fetchArticles() 方法使用 async/await 语法来处理异步操作。await fetch('https://example.com/api/articles') 发起 GET 请求并等待响应。然后 await response.json() 将响应体解析为 JSON 数据，最后将数据赋值给 this.articles，这样数据就可以在模板中进行展示了。

3.2 在组件中发起 POST 请求

假设我们有一个创建新文章的表单，需要将用户输入的数据发送到服务器。我们创建一个 CreateArticle.vue 组件：

<template>
  <div>
    <h1>创建文章</h1>
    <form @submit.prevent="createArticle">
      <label for="title">标题:</label>
      <input type="text" id="title" v-model="article.title" required>
      <br>
      <label for="content">内容:</label>
      <textarea id="content" v-model="article.content" required></textarea>
      <br>
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      article: {
        title: '',
        content: ''
      }
    };
  },
  methods: {
    async createArticle() {
      try {
        const response = await fetch('https://example.com/api/articles', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(this.article)
        });
        const data = await response.json();
        console.log('文章创建成功:', data);
        this.article.title = '';
        this.article.content = '';
      } catch (error) {
        console.error('创建文章失败:', error);
      }
    }
  }
};
</script>

在这个组件中：

  • data() 函数返回一个包含 article 对象的对象，article 对象用于存储用户在表单中输入的数据。
  • createArticle() 方法在表单提交时被调用。它使用 fetch() 发起一个 POST 请求，将 this.article 转换为 JSON 格式作为请求体发送。如果请求成功，将清空表单数据，并在控制台打印成功信息；如果失败，打印错误信息。

四、封装 Fetch API

虽然在组件中直接使用 Fetch API 可以实现网络请求功能，但随着项目的增长，代码会变得重复且难以维护。因此，我们可以对 Fetch API 进行封装，提高代码的复用性和可维护性。

4.1 创建封装文件

在 src 目录下创建一个 api 目录，然后在该目录下创建一个 fetch.js 文件，用于封装 Fetch API。

const baseUrl = 'https://example.com/api';

const request = async (url, options = {}) => {
  try {
    const response = await fetch(`${baseUrl}${url}`, options);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return await response.json();
  } catch (error) {
    console.error('请求失败:', error);
    throw error;
  }
};

export const get = async (url, params = {}) => {
  const queryString = new URLSearchParams(params).toString();
  return request(`${url}?${queryString}`, { method: 'GET' });
};

export const post = async (url, data = {}) => {
  return request(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
  });
};

// 同理可以封装其他请求方法，如 PUT、DELETE 等

在上述代码中：

  • baseUrl 定义了 API 的基础 URL，这样在后续的请求中可以统一使用，方便修改。
  • request 函数是核心的封装函数，它接受 url 和 options 作为参数，发起请求并处理响应。如果响应状态码不是 2xx，则抛出一个错误。
  • get 函数用于发起 GET 请求，它将 params 对象转换为查询字符串添加到 URL 中，并调用 request 函数。
  • post 函数用于发起 POST 请求，设置请求头和请求体后调用 request 函数。

4.2 在组件中使用封装后的 API

现在我们修改之前的 ArticleList.vue 和 CreateArticle.vue 组件，使用封装后的 API。

ArticleList.vue

<template>
  <div>
    <h1>文章列表</h1>
    <ul>
      <li v-for="article in articles" :key="article.id">
        {{ article.title }}
      </li>
    </ul>
  </div>
</template>

<script>
import { get } from '@/api/fetch';

export default {
  data() {
    return {
      articles: []
    };
  },
  mounted() {
    this.fetchArticles();
  },
  methods: {
    async fetchArticles() {
      try {
        const data = await get('/articles');
        this.articles = data;
      } catch (error) {
        console.error('获取文章列表失败:', error);
      }
    }
  }
};
</script>

CreateArticle.vue

<template>
  <div>
    <h1>创建文章</h1>
    <form @submit.prevent="createArticle">
      <label for="title">标题:</label>
      <input type="text" id="title" v-model="article.title" required>
      <br>
      <label for="content">内容:</label>
      <textarea id="content" v-model="article.content" required></textarea>
      <br>
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
import { post } from '@/api/fetch';

export default {
  data() {
    return {
      article: {
        title: '',
        content: ''
      }
    };
  },
  methods: {
    async createArticle() {
      try {
        const data = await post('/articles', this.article);
        console.log('文章创建成功:', data);
        this.article.title = '';
        this.article.content = '';
      } catch (error) {
        console.error('创建文章失败:', error);
      }
    }
  }
};
</script>

通过这种方式，组件中的网络请求代码变得更加简洁，并且如果需要修改 API 的基础 URL 或者统一处理请求和响应，只需要在 fetch.js 文件中进行修改即可。

五、处理请求拦截和响应拦截

在实际项目中，我们经常需要在请求发送前和响应接收后进行一些通用的处理，比如添加请求头、处理错误等。这就需要用到请求拦截和响应拦截。

5.1 请求拦截

我们可以在封装的 fetch.js 文件中添加请求拦截逻辑。例如，假设我们需要在每个请求头中添加一个认证令牌（token）：

const baseUrl = 'https://example.com/api';
let token = 'your_token_here'; // 实际应用中需要动态获取和更新

const request = async (url, options = {}) => {
  // 请求拦截
  if (!options.headers) {
    options.headers = {};
  }
  options.headers.Authorization = `Bearer ${token}`;

  try {
    const response = await fetch(`${baseUrl}${url}`, options);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return await response.json();
  } catch (error) {
    console.error('请求失败:', error);
    throw error;
  }
};

// 其他代码不变

在上述代码中，我们在 request 函数内部添加了请求拦截逻辑，在请求发送前，检查 options.headers 是否存在，如果不存在则创建一个空对象，然后添加 Authorization 头。

5.2 响应拦截

同样在 fetch.js 文件中，我们可以添加响应拦截逻辑。比如，统一处理服务器返回的错误信息：

const baseUrl = 'https://example.com/api';
let token = 'your_token_here';

const request = async (url, options = {}) => {
  if (!options.headers) {
    options.headers = {};
  }
  options.headers.Authorization = `Bearer ${token}`;

  try {
    const response = await fetch(`${baseUrl}${url}`, options);
    // 响应拦截
    if (!response.ok) {
      const errorData = await response.json();
      let errorMessage = '请求失败';
      if (errorData && errorData.message) {
        errorMessage = errorData.message;
      }
      throw new Error(errorMessage);
    }
    return await response.json();
  } catch (error) {
    console.error('请求失败:', error);
    throw error;
  }
};

// 其他代码不变

在上述代码中，当响应状态码不是 2xx 时，我们将响应体解析为 JSON 数据，并提取其中的错误信息，如果存在则作为错误信息抛出，这样在组件中捕获错误时可以得到更具体的错误描述。

六、处理复杂的网络请求场景

在实际项目中，网络请求场景可能会更加复杂，比如并发请求、条件请求等。

6.1 并发请求

假设我们需要同时获取文章列表和用户信息，可以使用 Promise.all 来处理并发请求。

<template>
  <div>
    <h1>并发请求示例</h1>
    <p>文章列表:</p>
    <ul>
      <li v-for="article in articles" :key="article.id">
        {{ article.title }}
      </li>
    </ul>
    <p>用户信息: {{ user.name }}</p>
  </div>
</template>

<script>
import { get } from '@/api/fetch';

export default {
  data() {
    return {
      articles: [],
      user: {}
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      try {
        const [articlesResponse, userResponse] = await Promise.all([
          get('/articles'),
          get('/user')
        ]);
        this.articles = articlesResponse;
        this.user = userResponse;
      } catch (error) {
        console.error('并发请求失败:', error);
      }
    }
  }
};
</script>

在上述代码中，Promise.all 接受一个包含多个 Promise 的数组，只有当所有的 Promise 都被解决（resolved）时，它返回的 Promise 才会被解决，并且返回一个包含所有 Promise 解决值的数组。我们可以通过解构赋值来获取每个请求的响应数据。

6.2 条件请求

有时候我们需要根据某些条件来决定是否发起请求。例如，只有当用户登录后才获取用户相关的数据。

<template>
  <div>
    <h1>条件请求示例</h1>
    <p v-if="isLoggedIn">用户信息: {{ user.name }}</p>
    <button @click="checkAndFetch">检查并获取</button>
  </div>
</template>

<script>
import { get } from '@/api/fetch';

export default {
  data() {
    return {
      isLoggedIn: false,
      user: {}
    };
  },
  methods: {
    async checkAndFetch() {
      // 模拟检查用户登录状态
      this.isLoggedIn = true;
      if (this.isLoggedIn) {
        try {
          const data = await get('/user');
          this.user = data;
        } catch (error) {
          console.error('获取用户信息失败:', error);
        }
      }
    }
  }
};
</script>

在上述代码中，checkAndFetch 方法首先检查 isLoggedIn 的值，只有当它为 true 时才发起获取用户信息的请求。

七、性能优化与错误处理

在使用 Fetch API 进行网络请求时，性能优化和错误处理是非常重要的方面。

7.1 性能优化

  1. 减少请求次数：尽量合并多个相关的请求，避免不必要的重复请求。例如，如果一个页面需要获取多个数据，可以使用并发请求将它们合并为一次请求。
  2. 缓存数据：对于不经常变化的数据，可以在本地进行缓存。可以使用 localStorage 或者 Vuex 的持久化插件来实现简单的缓存功能。例如：
const getArticles = async () => {
  const cachedArticles = localStorage.getItem('articles');
  if (cachedArticles) {
    return JSON.parse(cachedArticles);
  }
  const data = await get('/articles');
  localStorage.setItem('articles', JSON.stringify(data));
  return data;
};
  1. 设置合理的超时时间：可以通过 AbortController 来设置请求的超时时间，避免请求长时间挂起。例如：
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000); // 5 秒超时

fetch('https://example.com/api/data', { signal: controller.signal })
  .then(response => {
    clearTimeout(timeoutId);
    // 处理响应
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      console.error('请求超时');
    } else {
      console.error('请求失败:', error);
    }
  });

7.2 错误处理

  1. 全局错误处理：在 Vue 项目中，可以使用 app.config.errorHandler 来全局捕获组件内抛出的错误，包括网络请求错误。例如：
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

app.config.errorHandler = (err, vm, info) => {
  console.log('全局捕获错误:', err, vm, info);
  // 可以在这里进行错误上报等操作
};

app.mount('#app');
  1. 请求错误处理：在封装的 fetch.js 文件中，我们已经对请求过程中的错误进行了基本处理。在组件中，也需要合理地捕获和处理错误，给用户友好的提示。例如：
<template>
  <div>
    <h1>错误处理示例</h1>
    <p v-if="error">{{ error }}</p>
    <button @click="fetchData">获取数据</button>
  </div>
</template>

<script>
import { get } from '@/api/fetch';

export default {
  data() {
    return {
      error: ''
    };
  },
  methods: {
    async fetchData() {
      try {
        await get('/nonexistent-api');
      } catch (error) {
        this.error = '获取数据失败，请稍后重试';
      }
    }
  }
};
</script>

通过以上对 Fetch API 在 Vue 项目中的集成、封装、各种场景处理、性能优化和错误处理的介绍，希望能够帮助你在前端开发中更好地利用 Fetch API 进行网络请求，构建出高效、稳定的 Vue 应用程序。在实际项目中，还需要根据具体的业务需求和场景进行进一步的优化和调整。