utf-8 編碼是一種廣泛使用的字符編碼,它支持幾乎所有的文字和符號。在開發過程中,確保網站的編碼格式正確是非常重要的。在 Vue 項目中,使用 axios 請求數據時也需要指定編碼格式為 utf-8,因為默認情況下它可能不是 utf-8。
axios 是一個基于 Promise 的 HTTP 庫,可以用于瀏覽器和 Node.js。它的主要特點包括可以在瀏覽器中發送 XMLHttpRequests 請求、可以在 Node.js 中發送 http 請求、支持 Promise API、攔截請求和響應、轉換請求和響應數據、取消請求、自動轉換為 JSON 數據等等。
// 安裝 axios
npm install axios
在項目中引入 axios:
import axios from 'axios';
Vue.prototype.$http = axios;
在發送請求時,需要設置請求頭的編碼格式為 utf-8,可以在創建 axios 實例時設置默認配置。
// 創建 axios 實例
const instance = axios.create({
baseURL: 'http://localhost:3000', // 設置請求的默認 URL
timeout: 1000, // 設置超時時間
headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'}
});
// 發送 GET 請求
instance.get('/user').then(response =>{
console.log(response.data);
}).catch(error =>{
console.log(error);
});
上面的代碼中,設置了請求頭的 Content-Type 為 application/x-www-form-urlencoded;charset=utf-8,這樣就可以確保請求數據和接收到的數據都是 utf-8 編碼。
如果服務器返回的數據不是 utf-8 編碼,可以使用 axios 的轉換響應數據的方法進行轉換。常見的轉換方法包括將數據轉換為 JSON 格式、將數據轉換為 ArrayBuffer 的格式、將數據轉換為 Blob 的格式、將數據轉換為 Document 的格式等等。下面是一個將響應數據轉換為 JSON 格式的例子:
// 創建 axios 實例
const instance = axios.create({
baseURL: 'http://localhost:3000', // 設置請求的默認 URL
timeout: 1000, // 設置超時時間
headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'}
});
// 發送 POST 請求
instance.post('/user', {
firstName: 'John',
lastName: 'Doe'
}).then(response =>{
console.log(response.data);
}).catch(error =>{
console.log(error);
});
// 轉換響應數據
instance.defaults.transformResponse = [function (data) {
try {
return JSON.parse(data);
} catch (e) {
return data;
}
}];
上面的代碼中,使用了默認的 JSON.parse 方法將響應數據轉換為 JSON 格式,并設置了轉換響應數據的方法。
下一篇vue app底部引導