前端如何请求后端数据？有哪些方法可以实现？-51CTO.COM

vue前端请求api的有几种方法

Vue 前端请求 API 的方法通常依赖于 JavaScript 提供的 AJAX 技术。在 Vue 项目中，常见的请求 API 的方法包括但不限于以下几种：

使用 XMLHttpRequest (原生方式)：

这是浏览器内置的用于执行 HTTP 请求的标准对象。尽管可以直接使用它发起请求，但在现代前端开发中已较少直接使用。

使用 Fetch API：

Fetch 是现代浏览器提供的一个更简洁、基于 Promise 的 API，用于替代 XMLHttpRequest。

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
    console.log(data);
    })
    .catch(error => {
    console.error('Error:', error);
    });1.
2.
3.
4.
5.
6.
7.
8.

使用 Axios：

Axios 是一个非常流行的第三方库，它基于 Promise 设计，支持浏览器和 Node.js 环境，提供了一种更加优雅的方式来处理异步 HTTP 请求。

import axios from 'axios';

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

// 或者 POST 请求
axios.post('https://api.example.com/data', { key: 'value' })
    .then(/* ... */)
    .catch(/* ... */);1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

使用 Vue Resource：

虽然 Vue Resource 已不再维护，但在 Vue 2 的早期阶段，它是官方推荐的一个 HTTP 客户端库，现在大部分开发者已经转向了 Axios。

使用其他第三方库：

• superagent

• whatwg-fetch（对不支持 Fetch 的旧版浏览器提供 polyfill）

• node-fetch（Node.js 环境下的 Fetch 实现）

• unfetch（轻量级 Fetch 封装）

Vue 自身配合生命周期钩子：

在没有额外库的情况下，Vue 组件内部可以直接通过 this.$http（如果使用了 Vue-resource）或创建新的 XMLHttpRequest 对象来发送请求，但这并不常见，因为专门的 HTTP 库提供了更多的便利性和错误处理机制。

在实际的 Vue 开发中，Axios 因其丰富的功能和良好的社区支持而成为主流的选择，但根据具体需求和偏好，开发者也可以选择其他适合的方法来请求 API。

更多详细内容，请微信搜索“前端爱好者“，戳我查看。

unfetch插件和 fetch有什么区别？

unfetch 是一个小型的 JavaScript 库，它主要用来作为 window.fetch API 的 polyfill。Fetch API 是现代浏览器原生提供的用于发出 HTTP 请求的一个标准接口，支持 Promise，并且在处理请求和响应时具有更简洁、更灵活的 API 设计。

Fetch API：

1. 原生支持：现代浏览器（包括移动设备上的 Webview）内置了 Fetch API，允许开发者直接使用。
2. 功能全面：提供了丰富的选项来定制请求头、请求方法、以及对响应数据的控制，如可以读取原始响应体或转换为 JSON 等。
3. 基于Promise：返回的是一个 Promise 对象，这使得异步操作更加易于管理和链式调用。
4. 相对局限性：早期的 Fetch 实现可能不支持一些高级特性，比如请求取消、流式读取等，而且错误处理不如传统的 XMLHttpRequest 直观。

unfetch：

1. 轻量级：unfetch 被设计得非常小巧，目的是为了提供一个最小化的 fetch 函数实现，以便在老版本浏览器中使用。
2. 兼容性：对于那些不支持 Fetch API 的老旧浏览器，unfetch 可以作为一个兼容方案，让开发者能够以接近现代浏览器的方式发起HTTP请求。
3. 简化功能：相比原生 Fetch，unfetch 可能不会实现所有 Fetch 的功能和选项，尤其是较新的或者较为复杂的功能，它通常只关注于最基本和最常用的请求功能。

Fetch 是现代浏览器的标准接口，而 unfetch 是为了让那些不支持 Fetch 的浏览器也能享受到类似 Fetch 的体验而开发的一个简化版库。

如果你的应用需要面向不同版本浏览器用户，并且希望统一请求 API 的使用方式，那么 unfetch 就是一个很好的选择。

不过，在大多数现代项目中，由于浏览器兼容性的改善，直接使用原生 Fetch API 已经足够满足需求。

vue2 使用 axios

在 Vue 2 中集成和使用 Axios 进行 HTTP 请求操作，通常包括以下几个步骤：

安装 Axios：

在项目目录下通过 npm 或 yarn 安装 Axios。

npm install axios
# 或者
yarn add axios1.
2.
3.

全局配置与注册：

为了让所有 Vue 组件都能方便地访问 Axios，可以将其挂载到 Vue 的原型上，这样在每个组件中就可以通过 this.$http 来调用 Axios。

在 main.js 文件中进行如下配置：

import axios from 'axios';
import Vue from 'vue';

// 设置默认配置（可选）
axios.defaults.baseURL = process.env.VUE_APP_API_BASE_URL; // 设置 API 基础 URL

// 将 axios 挂载到 Vue.prototype 上
Vue.prototype.$http = axios;

// 创建并使用一个自定义实例（可选）
const request = axios.create({
    headers: {'Content-Type': 'application/json;charset=UTF-8'},
    // 其他自定义配置项...
});
Vue.prototype.$api = request; // 如果需要区分不同类型的请求，可以创建多个实例并分别挂载

new Vue({
    render: h => h(App),
}).$mount('#app');1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

基本使用：

• 发起 GET 请求：

this.$http.get('/api/users')
.then(response => {
    console.log(response.data);
    // 处理成功回调逻辑
})
.catch(error => {
    console.error(error);
    // 处理错误回调逻辑
});1.
2.
3.
4.
5.
6.
7.
8.
9.

• 发起 POST 请求，并且如果需要发送 JSON 格式的数据：

let data = { name: 'John', age: 30 };
this.$http.post('/api/users', data)
.then(response => {
    // ...
})
.catch(error => {
    // ...
});1.
2.
3.
4.
5.
6.
7.
8.

拦截器设置：

可以设置请求/响应拦截器来处理全局的请求前缀、添加 JWT token 等操作：

// 添加请求拦截器
axios.interceptors.request.use(config => {
    const token = localStorage.getItem('token'); // 获取 token 示例
    if (token) {
    config.headers.Authorization = `Bearer ${token}`; // 设置请求头
    }
    return config;
}, error => Promise.reject(error));

// 添加响应拦截器
axios.interceptors.response.use(response => {
    // 对响应数据做统一处理，如错误码判断等
    return response;
}, error => {
    // 对响应错误做统一处理，如弹出通知或重定向登录页面
    return Promise.reject(error);
});1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

结合 async/await 使用：

在 Vue 组件的 methods 或其他支持 async 函数的地方，可以结合 async/await 来简化异步操作：

async fetchData() {
    try {
    const response = await this.$http.get('/api/data');
    this.someData = response.data;
    } catch (error) {
    console.error('Fetch data failed:', error);
    }
}1.
2.
3.
4.
5.
6.
7.
8.

以上就是 Vue 2 中如何使用 Axios 的基本步骤。

根据实际项目需求，还可以进一步封装 Axios 实例以提供更符合业务逻辑的 API 调用方式。

vue如何使用fetch请求数据

在 Vue.js 中使用 Fetch API 请求数据的基本步骤如下：

1. 发起 GET 请求：在 Vue 组件的方法中，可以使用 fetch 函数向服务器发送 GET 请求获取数据。以下是一个简单的示例：

// 假设组件内部方法
export default {
  data() {
    return {
      someData: []
    };
  },
  methods: {
    fetchData() {
      fetch('https://api.example.com/data')
        .then(response => {
          // 检查响应是否成功（状态码为 200）
          if (response.ok) {
            return response.json(); // 将响应体转换为 JSON 格式
          } else {
            throw new Error('网络请求失败');
          }
        })
        .then(data => {
          // 处理并应用到组件数据中
          this.someData = data;
        })
        .catch(error => {
          console.error('Error fetching data:', error);
        });
    }
  },
  mounted() {
    this.fetchData(); // 在组件挂载时调用此方法来加载数据
  }
};1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.

2. 发起 POST 请求：如果需要向服务器发送 POST 请求（例如提交表单数据），可以这样做：

// 假设有一个包含 form 数据的对象
let postData = { username: 'John', password: 'secret' };

fetch('https://api.example.com/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json' // 设置请求头以告知服务器内容格式
  },
  body: JSON.stringify(postData) // 将数据转换为 JSON 字符串作为请求体
})
.then(response => /* ...处理响应和数据... */)
.catch(error => /* ...处理错误... */);1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

3. 注意点：

• Fetch API 默认不会将 cookie 发送到跨域请求，如果需要携带 cookie，需要设置 credentials 选项：

fetch(url, { credentials: 'include' /* 或 'same-origin' */ })1.

• Fetch 不支持像 axios 那样直接配置超时时间，但可以通过 Promise.race 和 setTimeout 结合实现。

• Fetch 目前不支持原生的请求中断功能，也就是说无法直接 abort 一个正在进行的请求。

4. 全局配置：虽然 Fetch API 本身没有提供类似于 Axios 的全局配置功能，但在实际项目中，通常会通过封装 fetch 函数或结合 Vuex 等状态管理库来统一处理诸如错误处理、身份验证 token 添加等操作。

vue 封装axios

在 Vue.js 中封装 Axios API 可以简化请求处理并提供统一的错误处理、默认配置和数据格式化。以下是一个简单的 Axios 封装示例：

// 创建一个名为 AxiosApi 的文件，例如：Axios.js

import axios from 'axios'; // （可选）如果你希望使用 axios 的 CancelToken 来支持取消请求

let cancelTokenSource = null; // 用于取消请求（仅当使用 axios 时）

function createCancelToken() {
  // 如果你选择使用 axios 的 CancelToken 功能
  if (axios) {
    cancelTokenSource = axios.CancelToken.source();
    return cancelTokenSource.token;
  }
  // 如果不使用 axios，可以忽略这部分
  return null;
}

export default async function AxiosApi(url, options = {}) {
  const { method = 'GET', body, headers = {}, params, isJson = true } = options;

  // 添加全局请求头或其他默认配置
  headers['Content-Type'] = isJson ? 'application/json' : headers['Content-Type'] || 'text/plain';

  // 处理 GET 请求参数
  if (method === 'GET' && params) {
    url = new URL(url, window.location.origin);
    Object.keys(params).forEach(key => url.searchParams.append(key, params[key]));
  }

  // 创建取消请求标记（如果使用 axios）
  const cancelToken = createCancelToken();

  try {
    const response = await Axios(url, {
      method,
      headers,
      ...(body && { body: isJson ? JSON.stringify(body) : body }), // 对于 POST/PUT 等方法，发送 JSON 格式的数据
      ...(cancelToken && { signal: cancelTokenSource.token }), // 如果有取消请求功能，传递信号对象
    });

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const data = isJson ? await response.json() : await response.text(); // 根据需要解析响应内容为 JSON 或文本

    return {
      success: true,
      data,
      message: '请求成功',
    };
  } catch (error) {
    // 如果是 Axios 的取消错误，则识别出来
    if (axios.isCancel(error)) {
      console.error('Request canceled', error.message);
      return {
        success: false,
        message: '请求已取消',
      };
    }

    console.error('Axios API 请求失败', error);
    return {
      success: false,
      message: '服务器异常，请稍后重试',
    };
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.

然后，在你的 Vue 组件中引入并使用这个封装好的 AxiosApi 函数：

import AxiosApi from './Axios.js';

export default {
  name: 'MyComponent',
  methods: {
    async AxiosData() {
      const response = await AxiosApi('/api/data', {
        method: 'GET',
        params: { id: 1 },
      });

      if (response.success) {
        this.data = response.data;
      } else {
        // 处理错误
      }
    },
  },
  mounted() {
    this.AxiosData();
  },
};1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

以上代码封装了 Axios API 的基本用法，并且提供了一定程度的错误处理和默认配置。你可以根据项目的具体需求对它进行扩展，比如增加拦截器、添加身份验证信息、处理分页等。

vue 封装 Fetch

在 Vue 中封装 Fetch API 以支持 GET、POST、PATCH 等多种 HTTP 方法，可以创建一个通用的函数，并通过参数决定使用哪种方法。以下是一个示例：

创建一个名为 fetchWrapper.js 的文件

// 创建一个名为 fetchWrapper.js 的文件

export default {
  async request(url, options = {}) {
    const { method = 'GET', data = {}, headers = {} } = options;

    // 添加默认请求头和处理数据格式化
    const defaultHeaders = {
      'Content-Type': 'application/json',
    };
    const mergedHeaders = { ...defaultHeaders, ...headers };

    if (method !== 'GET') {
      // 非 GET 请求时将数据转换为 JSON 字符串
      const body = JSON.stringify(data);
      options.body = body;
    }

    try {
      const response = await fetch(url, {
        method,
        headers: mergedHeaders,
        ...(method !== 'GET' && { body: options.body }),
      });

      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }

      // 根据响应内容类型解析数据
      const contentType = response.headers.get('content-type');
      let responseData;
      if (contentType && contentType.includes('application/json')) {
        responseData = await response.json();
      } else {
        responseData = await response.text();
      }

      return { success: true, data: responseData };
    } catch (error) {
      console.error('Fetch API 请求失败:', error);
      return { success: false, message: '服务器异常，请稍后重试' };
    }
  },

  get: (url, params = {}, headers = {}) => this.request(url, { method: 'GET', params, headers }),
  post: (url, data = {}, headers = {}) => this.request(url, { method: 'POST', data, headers }),
  patch: (url, data = {}, headers = {}) => this.request(url, { method: 'PATCH', data, headers }),
  // 可以根据需要添加更多方法，如 put、delete 等
};1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.

在 Vue 组件中使用封装的请求

// 在 Vue 组件中使用封装的请求
import { get, post, patch } from './fetchWrapper';

export default {
  name: 'MyComponent',
  methods: {
    async getDataFromServer() {
      const apiUrl = '/api/data';
      const queryParams = { id: 1 };
      
      try {
        const { success, data } = await get(apiUrl, queryParams);
        
        if (success) {
          console.log('GET 请求成功，返回的数据:', data);
          this.responseData = data;
        } else {
          // 处理错误情况
        }
      } catch (error) {
        // ...
      }
    },

    async sendDataToServer() {
      const apiUrl = '/api/data';
      const postData = { id: 1, name: 'Example' };
      
      try {
        const { success, data } = await post(apiUrl, postData);
        
        if (success) {
          console.log('POST 请求成功，返回的数据:', data);
        } else {
          // 处理错误情况
        }
      } catch (error) {
        // ...
      }
    },

    async updateDataOnServer() {
      const apiUrl = '/api/data/1';
      const updatedData = { name: 'Updated Example' };
      
      try {
        const { success, data } = await patch(apiUrl, updatedData);
        
        if (success) {
          console.log('PATCH 请求成功，返回的数据:', data);
        } else {
          // 处理错误情况
        }
      } catch (error) {
        // ...
      }
    },
  },
};1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.

前端如何请求后端数据？有哪些方法可以实现？