Vue.js 是一個前端框架,可以實現前端頁面的動態渲染。axios 是 Vue.js 的一部分,是一個基于 Promise 的 HTTP 請求庫,用于與后端進行數據交互。
axios 的請求配置分為以下幾部分。
axios({
method: 'get',
url: '/user',
params: {
id: 12345
}
})
第一部分是 method,表示請求方法,可以是 get、post、put 等。
第二部分是 url,表示后端請求地址,可以寫相對地址,也可以寫絕對地址。
第三部分是 params,表示請求參數,可以是字符串或者對象。
axios({
method: 'post',
url: '/user',
data: {
firstName: 'John',
lastName: 'Doe'
}
})
第四部分是 data,表示請求數據,可以是字符串,也可以是對象。當請求方法是 post、put 等時,一般使用 data 來提交數據。
請求配置還可以添加其他參數。
axios({
method: 'post',
url: '/user',
data: {
firstName: 'John',
lastName: 'Doe'
},
headers: {
'X-Requested-With': 'XMLHttpRequest'
},
timeout: 1000,
responseType: 'json'
})
headers 表示請求頭,timeout 表示請求超時時間,responseType 表示響應類型。
請求配置可以通過 axios.create() 方法來創建實例。
const instance = axios.create({
baseURL: 'https://some-domain.com/api/',
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'}
})
baseURL 表示基礎請求地址,所有請求都會拼接上該地址。timeout 和 headers 同上述請求配置。
在實例中可以定義攔截器,用于在請求或響應過程中進行一些自定義的處理。
instance.interceptors.request.use((config) =>{
console.log('請求攔截器');
return config;
}, (error) =>{
console.log('請求錯誤攔截器');
return Promise.reject(error);
});
instance.interceptors.response.use((response) =>{
console.log('響應攔截器');
return response;
}, (error) =>{
console.log('響應錯誤攔截器');
return Promise.reject(error);
});
請求攔截器用于在請求發送前做一些處理,比如添加公共請求頭。響應攔截器用于在響應返回前做一些處理,比如對返回數據做一些過濾或格式化。
以上就是關于 Vue.js 中 axios 請求配置的所有內容。