Automa-通過連接塊來自動化你的瀏覽器
1、前言通過瀏覽器插件可實現自動化腳本的錄制與編寫，具有代表性的工具就是：Selenium IDE、Katalon Recorder，對于簡單的業務來說可快速實現自動化的上手工作。Selenium IDEKat
Vue 前端請求 API 的方法通常依賴于 JavaScript 提供的 AJAX 技術。在 Vue 項目中，常見的請求 API 的方法包括但不限于以下幾種：
這是瀏覽器內置的用于執行 HTTP 請求的標準對象。盡管可以直接使用它發起請求，但在現代前端開發中已較少直接使用。
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); });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(/* ... */);雖然 Vue Resource 已不再維護，但在 Vue 2 的早期階段，它是官方推薦的一個 HTTP 客戶端庫，現在大部分開發者已經轉向了 Axios。
? superagent
? whatwg-fetch（對不支持 Fetch 的舊版瀏覽器提供 polyfill）
? node-fetch（Node.js 環境下的 Fetch 實現）
? unfetch（輕量級 Fetch 封裝）
在沒有額外庫的情況下，Vue 組件內部可以直接通過 this.$http（如果使用了 Vue-resource）或創建新的 XMLHttpRequest 對象來發送請求，但這并不常見，因為專門的 HTTP 庫提供了更多的便利性和錯誤處理機制。
在實際的 Vue 開發中，Axios 因其豐富的功能和良好的社區支持而成為主流的選擇，但根據具體需求和偏好，開發者也可以選擇其他適合的方法來請求 API。
更多詳細內容，請微信搜索“前端愛好者“， 戳我 查看 。
unfetch 是一個小型的 JavaScript 庫，它主要用來作為 window.fetch API 的 polyfill。Fetch API 是現代瀏覽器原生提供的用于發出 HTTP 請求的一個標準接口，支持 Promise，并且在處理請求和響應時具有更簡潔、更靈活的 API 設計。
Fetch API：
unfetch：
Fetch 是現代瀏覽器的標準接口，而 unfetch 是為了讓那些不支持 Fetch 的瀏覽器也能享受到類似 Fetch 的體驗而開發的一個簡化版庫。
如果你的應用需要面向不同版本瀏覽器用戶，并且希望統一請求 API 的使用方式，那么 unfetch 就是一個很好的選擇。
不過，在大多數現代項目中，由于瀏覽器兼容性的改善，直接使用原生 Fetch API 已經足夠滿足需求。
在 Vue 2 中集成和使用 Axios 進行 HTTP 請求操作，通常包括以下幾個步驟：
在項目目錄下通過 npm 或 yarn 安裝 Axios。
npm install axios# 或者yarn add axios為了讓所有 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');? 發起 GET 請求：
this.$http.get('/api/users').then(response => { console.log(response.data); // 處理成功回調邏輯}).catch(error => { console.error(error); // 處理錯誤回調邏輯});? 發起 POST 請求，并且如果需要發送 JSON 格式的數據：
let data = { name: 'John', age: 30 };this.$http.post('/api/users', data).then(response => { // ...}).catch(error => { // ...});可以設置請求/響應攔截器來處理全局的請求前綴、添加 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);});在 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); }}以上就是 Vue 2 中如何使用 Axios 的基本步驟。
根據實際項目需求，還可以進一步封裝 Axios 實例以提供更符合業務邏輯的 API 調用方式。
在 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(); // 在組件掛載時調用此方法來加載數據 }};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 => /* ...處理錯誤... */);3. 注意點：
? Fetch API 默認不會將 cookie 發送到跨域請求，如果需要攜帶 cookie，需要設置 credentials 選項：
fetch(url, { credentials: 'include' /* 或 'same-origin' */ })? Fetch 不支持像 axios 那樣直接配置超時時間，但可以通過 Promise.race 和 setTimeout 結合實現。
? Fetch 目前不支持原生的請求中斷功能，也就是說無法直接 abort 一個正在進行的請求。
在 Vue.js 中封裝 Axios API 可以簡化請求處理并提供統一的錯誤處理、默認配置和數據格式化。以下是一個簡單的 Axios 封裝示例：
// 創建一個名為 AxiosApi 的文件，例如：Axios.jsimport 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 函數：
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 API 以支持 GET、POST、PATCH 等多種 HTTP 方法，可以創建一個通用的函數，并通過參數決定使用哪種方法。以下是一個示例：
// 創建一個名為 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 組件中使用封裝的請求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) { // ... } }, },};
本文鏈接：http://m.www897cc.com/showinfo-26-80338-0.html前端如何請求后端數據？有哪些方法可以實現？
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： 深入探索堆：Go語言中的高效數據結構
下一篇： 你的項目應該如何正確分層？你會嗎？
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號