前端请求的有几种方法

  • vue前端请求api的有几种方法
    • [使用 XMLHttpRequest (原生方式):](#使用 XMLHttpRequest (原生方式):)
    • [使用 Fetch API:](#使用 Fetch API:)
    • [使用 Axios:](#使用 Axios:)
    • [使用 Vue Resource:](#使用 Vue Resource:)
    • 使用其他第三方库
    • [Vue 自身配合生命周期钩子:](#Vue 自身配合生命周期钩子:)
  • [unfetch插件和 fetch有什么区别?](#unfetch插件和 fetch有什么区别?)
  • [vue2 使用 axios](#vue2 使用 axios)
  • vue如何使用fetch请求数据
  • [vue 封装axios](#vue 封装axios)
  • [vue 封装 Fetch](#vue 封装 Fetch)
    • [创建一个名为 fetchWrapper.js 的文件](#创建一个名为 fetchWrapper.js 的文件)
    • [在 Vue 组件中使用封装的请求](#在 Vue 组件中使用封装的请求)

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

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

使用 XMLHttpRequest (原生方式)

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

使用 Fetch API

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

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

使用 Axios

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

javascript 复制代码
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(/* ... */);

使用 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。

bash 复制代码
npm install axios
# 或者
yarn add axios

全局配置与注册

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

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

javascript 复制代码
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');

基本使用

  • 发起 GET 请求:

    javascript 复制代码
    this.$http.get('/api/users')
    .then(response => {
        console.log(response.data);
        // 处理成功回调逻辑
    })
    .catch(error => {
        console.error(error);
        // 处理错误回调逻辑
    });
  • 发起 POST 请求,并且如果需要发送 JSON 格式的数据:

    javascript 复制代码
    let data = { name: 'John', age: 30 };
    this.$http.post('/api/users', data)
    .then(response => {
        // ...
    })
    .catch(error => {
        // ...
    });

拦截器设置

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

javascript 复制代码
// 添加请求拦截器
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);
});

结合 async/await 使用

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

javascript 复制代码
async fetchData() {
    try {
    const response = await this.$http.get('/api/data');
    this.someData = response.data;
    } catch (error) {
    console.error('Fetch data failed:', error);
    }
}

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

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

vue如何使用fetch请求数据

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

  1. 发起 GET 请求

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

    javascript 复制代码
    // 假设组件内部方法
    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(); // 在组件挂载时调用此方法来加载数据
      }
    };
  2. 发起 POST 请求

    如果需要向服务器发送 POST 请求(例如提交表单数据),可以这样做:

    javascript 复制代码
    // 假设有一个包含 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 => /* ...处理错误... */);
  3. 注意点

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

      javascript 复制代码
      fetch(url, { credentials: 'include' /* 或 'same-origin' */ })
    • Fetch 不支持像 axios 那样直接配置超时时间,但可以通过 Promise.race 和 setTimeout 结合实现。

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

  4. 全局配置

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

vue 封装axios

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

javascript 复制代码
// 创建一个名为 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: '服务器异常,请稍后重试',
    };
  }
}

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

javascript 复制代码
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();
  },
};

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

vue 封装 Fetch

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

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

javascript 复制代码
// 创建一个名为 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 等
};

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

js 复制代码
// 在 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) {
        // ...
      }
    },
  },
};
相关推荐
Black蜡笔小新15 分钟前
网页直播/点播播放器EasyPlayer.js播放器OffscreenCanvas这个特性是否需要特殊的环境和硬件支持
前端·javascript·html
秦jh_1 小时前
【Linux】多线程(概念,控制)
linux·运维·前端
蜗牛快跑2131 小时前
面向对象编程 vs 函数式编程
前端·函数式编程·面向对象编程
Dread_lxy1 小时前
vue 依赖注入(Provide、Inject )和混入(mixins)
前端·javascript·vue.js
涔溪2 小时前
Ecmascript(ES)标准
前端·elasticsearch·ecmascript
榴莲千丞2 小时前
第8章利用CSS制作导航菜单
前端·css
奔跑草-2 小时前
【前端】深入浅出 - TypeScript 的详细讲解
前端·javascript·react.js·typescript
羡与3 小时前
echarts-gl 3D柱状图配置
前端·javascript·echarts
guokanglun3 小时前
CSS样式实现3D效果
前端·css·3d
咔咔库奇3 小时前
ES6进阶知识一
前端·ecmascript·es6