溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
axios在項目中(vue)的使用
沒有vue項目的使用vue-cli腳手架生成一個webpack模板的項目即可愉快的看下去了~
如果開發遇到跨域問題可以參考：https://www.jb51.net/article/134571.htm
安裝axios到項目中
npm install axios --save
配置wepack別名，不同環境訪問不同的配置接口
配置：
使用：import config from 'config'
封裝一個axios實例
新建fetch.js,在此創建axios實例與過濾器
若配置了代理。則config.apiBaseUrl則配置代理的前綴即可
import config from 'config'
import axios from 'axios'
// import qs from 'qs';
const instance = axios.create({
baseURL: config.apiBaseUrl, // api的base_url
timeout: 10000, // 請求超時時間
// transformRequest: data => qs.stringify(data)
});
application/json，轉換后提交格式為application/x-www-form-urlencoded[FromBody]接收json格式的數據，正常的都是application/x-www-form-urlencoded故有此修改。qs到項目中,可轉換數據格式類型使用qs轉換請求對比圖
給實例添加攔截器
// 添加請求攔截器
instance.interceptors.request.use(function (config) {
// 在發送請求之前做些什么
return config;
}, function (error) {
// 對請求錯誤做些什么
return Promise.reject(error);
});
// 添加響應攔截器
instance.interceptors.response.use(function (response) {
// 對響應數據做點什么
return response;
}, function (error) {
// 對響應錯誤做點什么
return Promise.reject(error);
});
// 最后暴露實例
export default instance
實例的調用
若配置了express代理，請求路徑為：瀏覽器->express開發服務器-----發送請求---->接口服務器
import fetch from 'fetch.js'
//get
fetch({
url:'/home/data',//完整的請求路徑為fetch.js配置的baseURL+/home/data?pageIndex=1
method:'GET',
params:{pageIndex:1}
})
//post
fetch({
baseURL:'/api/v1',//完整的請求路徑為/api/v1/home/save
url:'/home/save',
method:'POST',
data:{id:1}
})
以上就是本次分享的關于vue項目中axios使用的全部內容，感謝你對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
