前端如何請求后端數(shù)據(jù)？有哪些方法可以實現(xiàn)？
vue前端請求api的有幾種方法
Vue 前端請求 API 的方法通常依賴于 JavaScript 提供的 AJAX 技術(shù)。在 Vue 項目中，常見的請求 API 的方法包括但不限于以下幾種：
**使用 XMLHttpRequest (原生方式)**：
這是瀏覽器內(nèi)置的用于執(zhí)行 HTTP 請求的標準對象。盡管可以直接使用它發(fā)起請求，但在現(xiàn)代前端開發(fā)中已較少直接使用。
使用 Fetch API：
Fetch 是現(xiàn)代瀏覽器提供的一個更簡潔、基于 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：
Axios 是一個非常流行的第三方庫，它基于 Promise 設(shè)計，支持瀏覽器和 Node.js 環(huán)境，提供了一種更加優(yōu)雅的方式來處理異步 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 Resource 已不再維護，但在 Vue 2 的早期階段，它是官方推薦的一個 HTTP 客戶端庫，現(xiàn)在大部分開發(fā)者已經(jīng)轉(zhuǎn)向了 Axios。
使用其他第三方庫：
? superagent
? whatwg-fetch（對不支持 Fetch 的舊版瀏覽器提供 polyfill）
? node-fetch（Node.js 環(huán)境下的 Fetch 實現(xiàn)）
? unfetch（輕量級 Fetch 封裝）
Vue 自身配合生命周期鉤子：
在沒有額外庫的情況下，Vue 組件內(nèi)部可以直接通過 this.$http（如果使用了 Vue-resource）或創(chuàng)建新的 XMLHttpRequest 對象來發(fā)送請求，但這并不常見，因為專門的 HTTP 庫提供了更多的便利性和錯誤處理機制。
在實際的 Vue 開發(fā)中，Axios 因其豐富的功能和良好的社區(qū)支持而成為主流的選擇，但根據(jù)具體需求和偏好，開發(fā)者也可以選擇其他適合的方法來請求 API。
更多詳細內(nèi)容，請微信搜索“前端愛好者“， 戳我 查看 。
unfetch插件和 fetch有什么區(qū)別？
unfetch 是一個小型的 JavaScript 庫，它主要用來作為 window.fetch API 的 polyfill。Fetch API 是現(xiàn)代瀏覽器原生提供的用于發(fā)出 HTTP 請求的一個標準接口，支持 Promise，并且在處理請求和響應(yīng)時具有更簡潔、更靈活的 API 設(shè)計。
Fetch API：
- 1. 原生支持：現(xiàn)代瀏覽器（包括移動設(shè)備上的 Webview）內(nèi)置了 Fetch API，允許開發(fā)者直接使用。
- 2. 功能全面：提供了豐富的選項來定制請求頭、請求方法、以及對響應(yīng)數(shù)據(jù)的控制，如可以讀取原始響應(yīng)體或轉(zhuǎn)換為 JSON 等。
- 3. 基于Promise：返回的是一個 Promise 對象，這使得異步操作更加易于管理和鏈式調(diào)用。
- 4. 相對局限性：早期的 Fetch 實現(xiàn)可能不支持一些高級特性，比如請求取消、流式讀取等，而且錯誤處理不如傳統(tǒng)的 XMLHttpRequest 直觀。
unfetch：
- 1. 輕量級：unfetch 被設(shè)計得非常小巧，目的是為了提供一個最小化的 fetch 函數(shù)實現(xiàn)，以便在老版本瀏覽器中使用。
- 2. 兼容性：對于那些不支持 Fetch API 的老舊瀏覽器，unfetch 可以作為一個兼容方案，讓開發(fā)者能夠以接近現(xiàn)代瀏覽器的方式發(fā)起HTTP請求。
- 3. 簡化功能：相比原生 Fetch，unfetch 可能不會實現(xiàn)所有 Fetch 的功能和選項，尤其是較新的或者較為復(fù)雜的功能，它通常只關(guān)注于最基本和最常用的請求功能。
Fetch 是現(xiàn)代瀏覽器的標準接口，而 unfetch 是為了讓那些不支持 Fetch 的瀏覽器也能享受到類似 Fetch 的體驗而開發(fā)的一個簡化版庫。
如果你的應(yīng)用需要面向不同版本瀏覽器用戶，并且希望統(tǒng)一請求 API 的使用方式，那么 unfetch 就是一個很好的選擇。
不過，在大多數(shù)現(xiàn)代項目中，由于瀏覽器兼容性的改善，直接使用原生 Fetch API 已經(jīng)足夠滿足需求。
vue2 使用 axios
在 Vue 2 中集成和使用 Axios 進行 HTTP 請求操作，通常包括以下幾個步驟：
安裝 Axios：
在項目目錄下通過 npm 或 yarn 安裝 Axios。
npm install axios
# 或者
yarn add axios全局配置與注冊：
為了讓所有 Vue 組件都能方便地訪問 Axios，可以將其掛載到 Vue 的原型上，這樣在每個組件中就可以通過 this.$http 來調(diào)用 Axios。
在 main.js 文件中進行如下配置：
import axios from 'axios';
import Vue from 'vue';
// 設(shè)置默認配置（可選）
axios.defaults.baseURL = process.env.VUE_APP_API_BASE_URL; // 設(shè)置 API 基礎(chǔ) URL
// 將 axios 掛載到 Vue.prototype 上
Vue.prototype.$http = axios;
// 創(chuàng)建并使用一個自定義實例（可選）
const request = axios.create({
headers: {'Content-Type': 'application/json;charset=UTF-8'},
// 其他自定義配置項...
});
Vue.prototype.$api = request; // 如果需要區(qū)分不同類型的請求，可以創(chuàng)建多個實例并分別掛載
new Vue({
render: h => h(App),
}).$mount('#app');基本使用：
? 發(fā)起 GET 請求：
this.$http.get('/api/users')
.then(response => {
console.log(response.data);
// 處理成功回調(diào)邏輯
})
.catch(error => {
console.error(error);
// 處理錯誤回調(diào)邏輯
});? 發(fā)起 POST 請求，并且如果需要發(fā)送 JSON 格式的數(shù)據(jù)：
let data = { name: 'John', age: 30 };
this.$http.post('/api/users', data)
.then(response => {
// ...
})
.catch(error => {
// ...
});攔截器設(shè)置：
可以設(shè)置請求/響應(yīng)攔截器來處理全局的請求前綴、添加 JWT token 等操作：
// 添加請求攔截器
axios.interceptors.request.use(config => {
const token = localStorage.getItem('token'); // 獲取 token 示例
if (token) {
config.headers.Authorization = `Bearer ${token}`; // 設(shè)置請求頭
}
return config;
}, error => Promise.reject(error));
// 添加響應(yīng)攔截器
axios.interceptors.response.use(response => {
// 對響應(yīng)數(shù)據(jù)做統(tǒng)一處理，如錯誤碼判斷等
return response;
}, error => {
// 對響應(yīng)錯誤做統(tǒng)一處理，如彈出通知或重定向登錄頁面
return Promise.reject(error);
});結(jié)合 async/await 使用：
在 Vue 組件的 methods 或其他支持 async 函數(shù)的地方，可以結(jié)合 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 的基本步驟。
根據(jù)實際項目需求，還可以進一步封裝 Axios 實例以提供更符合業(yè)務(wù)邏輯的 API 調(diào)用方式。
vue如何使用fetch請求數(shù)據(jù)
在 Vue.js 中使用 Fetch API 請求數(shù)據(jù)的基本步驟如下：
1. 發(fā)起 GET 請求： 在 Vue 組件的方法中，可以使用 fetch 函數(shù)向服務(wù)器發(fā)送 GET 請求獲取數(shù)據(jù)。以下是一個簡單的示例：
// 假設(shè)組件內(nèi)部方法
export default {
data() {
return {
someData: []
};
},
methods: {
fetchData() {
fetch('https://api.example.com/data')
.then(response => {
// 檢查響應(yīng)是否成功（狀態(tài)碼為 200）
if (response.ok) {
return response.json(); // 將響應(yīng)體轉(zhuǎn)換為 JSON 格式
} else {
throw new Error('網(wǎng)絡(luò)請求失敗');
}
})
.then(data => {
// 處理并應(yīng)用到組件數(shù)據(jù)中
this.someData = data;
})
.catch(error => {
console.error('Error fetching data:', error);
});
}
},
mounted() {
this.fetchData(); // 在組件掛載時調(diào)用此方法來加載數(shù)據(jù)
}
};2. 發(fā)起 POST 請求： 如果需要向服務(wù)器發(fā)送 POST 請求（例如提交表單數(shù)據(jù)），可以這樣做：
// 假設(shè)有一個包含 form 數(shù)據(jù)的對象
let postData = { username: 'John', password: 'secret' };
fetch('https://api.example.com/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json' // 設(shè)置請求頭以告知服務(wù)器內(nèi)容格式
},
body: JSON.stringify(postData) // 將數(shù)據(jù)轉(zhuǎn)換為 JSON 字符串作為請求體
})
.then(response => /* ...處理響應(yīng)和數(shù)據(jù)... */)
.catch(error => /* ...處理錯誤... */);3. 注意點：
? Fetch API 默認不會將 cookie 發(fā)送到跨域請求，如果需要攜帶 cookie，需要設(shè)置 credentials 選項：
fetch(url, { credentials: 'include' /* 或 'same-origin' */ })? Fetch 不支持像 axios 那樣直接配置超時時間，但可以通過 Promise.race 和 setTimeout 結(jié)合實現(xiàn)。
? Fetch 目前不支持原生的請求中斷功能，也就是說無法直接 abort 一個正在進行的請求。
- 4. 全局配置： 雖然 Fetch API 本身沒有提供類似于 Axios 的全局配置功能，但在實際項目中，通常會通過封裝 fetch 函數(shù)或結(jié)合 Vuex 等狀態(tài)管理庫來統(tǒng)一處理諸如錯誤處理、身份驗證 token 添加等操作。
vue 封裝axios
在 Vue.js 中封裝 Axios API 可以簡化請求處理并提供統(tǒng)一的錯誤處理、默認配置和數(shù)據(jù)格式化。以下是一個簡單的 Axios 封裝示例：
// 創(chuàng)建一個名為 AxiosApi 的文件，例如：Axios.js
import axios from 'axios'; // （可選）如果你希望使用 axios 的 CancelToken 來支持取消請求
let cancelTokenSource = null; // 用于取消請求（僅當(dāng)使用 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 請求參數(shù)
if (method === 'GET' && params) {
url = new URL(url, window.location.origin);
Object.keys(params).forEach(key => url.searchParams.append(key, params[key]));
}
// 創(chuàng)建取消請求標記（如果使用 axios）
const cancelToken = createCancelToken();
try {
const response = await Axios(url, {
method,
headers,
...(body && { body: isJson ? JSON.stringify(body) : body }), // 對于 POST/PUT 等方法，發(fā)送 JSON 格式的數(shù)據(jù)
...(cancelToken && { signal: cancelTokenSource.token }), // 如果有取消請求功能，傳遞信號對象
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = isJson ? await response.json() : await response.text(); // 根據(jù)需要解析響應(yīng)內(nèi)容為 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: '服務(wù)器異常，請稍后重試',
};
}
}然后，在你的 Vue 組件中引入并使用這個封裝好的 AxiosApi 函數(shù)：
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 的基本用法，并且提供了一定程度的錯誤處理和默認配置。你可以根據(jù)項目的具體需求對它進行擴展，比如增加攔截器、添加身份驗證信息、處理分頁等。
vue 封裝 Fetch
在 Vue 中封裝 Fetch API 以支持 GET、POST、PATCH 等多種 HTTP 方法，可以創(chuàng)建一個通用的函數(shù)，并通過參數(shù)決定使用哪種方法。以下是一個示例：
創(chuàng)建一個名為 fetchWrapper.js 的文件
// 創(chuàng)建一個名為 fetchWrapper.js 的文件
export default {
async request(url, options = {}) {
const { method = 'GET', data = {}, headers = {} } = options;
// 添加默認請求頭和處理數(shù)據(jù)格式化
const defaultHeaders = {
'Content-Type': 'application/json',
};
const mergedHeaders = { ...defaultHeaders, ...headers };
if (method !== 'GET') {
// 非 GET 請求時將數(shù)據(jù)轉(zhuǎn)換為 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}`);
}
// 根據(jù)響應(yīng)內(nèi)容類型解析數(shù)據(jù)
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: '服務(wù)器異常，請稍后重試' };
}
},
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 }),
// 可以根據(jù)需要添加更多方法，如 put、delete 等
};在 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 請求成功，返回的數(shù)據(jù):', 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 請求成功，返回的數(shù)據(jù):', 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 請求成功，返回的數(shù)據(jù):', data);
} else {
// 處理錯誤情況
}
} catch (error) {
// ...
}
},
},
};
