如何用vue封裝axios請求
其實vue封裝axios是很簡單的
首先 在src路徑下建http文件夾 并且創(chuàng)建api.js env.js request.js 這三個文件

env.js文件
這個文件主要就是封裝我們的公共地址
export default {
// 開發(fā)環(huán)境
dev: {
baseUrl: "開發(fā)環(huán)境公共地址"
},
// 測試環(huán)境test
test: {
baseUrl: "測試環(huán)境公共地址"
},
//線上接口
prod: {
baseUrl: "線上環(huán)境公共地址"
}
};
request.js 文件
這里主要就是創(chuàng)建axios 以及封裝請求攔截和相應(yīng)攔截
import axios from "axios";
import env from "./env";
//這里是私有域名 但是也可以不寫
var vipUrl = "/app";
// 創(chuàng)建axios實例
const service = axios.create({
//這里拿線上接口測試
baseUrl: env.prod.baseUrl + vipUrl,
headers:{},//請求頭
settimeout:2000,//超時時間
});
// 添加請求攔截器
service.interceptors.request.use(
config => {
// 在發(fā)送請求之前做些什么
config.headers["deviceType"] = "H5";
console.log("請求的數(shù)據(jù):", config);
return config;
},
error => {
// 對請求錯誤做些什么
return Promise.reject("出錯", error);
}
);
// 添加響應(yīng)攔截器
service.interceptors.response.use(
response => {
// 對響應(yīng)數(shù)據(jù)做點什么
// console.log("返回的數(shù)據(jù)", response);
return response;
},
error => {
// 對響應(yīng)錯誤做點什么
return Promise.reject(error);
}
);
export default service;
api.js
這個文件中主要是需要的接口地址
//引入request.js文件
import request from "./request";
// 輪播
export function getBanners(data) {
return request({
url: "/banner",//這個地址是去掉公共地址和私有域名之后剩下的地址
method: "GET",//請求方式 支持多種方式 get post put delete 等等
data//發(fā)送請求要配置的參數(shù) 無參數(shù)的情況下也可以不寫
});
}
最后是在頁面中的引用
那個頁面需要請求數(shù)據(jù) 就引入相應(yīng)的方法 比如我的首頁需要引入banner
<script>
//引入需要的接口
import { getBanners } from "../http/api";
export default {
name: "Home",
components: {},
mounted() {
//直接使用 .then 是請求成功的回調(diào) .catch是請求失敗的回調(diào)
getBanners()
.then(result => {
window.console.log("111", result);
})
.catch(err => {
window.console.log("222", err);
});
},
methods: {}
};
</script>
以上就是如何用vue封裝axios請求的詳細內(nèi)容,更多關(guān)于用vue封裝axios請求的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
vuecli項目構(gòu)建SSR服務(wù)端渲染的實現(xiàn)
這篇文章主要介紹了vuecli項目構(gòu)建SSR服務(wù)端渲染的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-10-10
vue-element-admin開發(fā)教程(v4.0.0之前)
本文主要介紹了vue-element-admin開發(fā)教程(v4.0.0之前),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2022-04-04
Vue實現(xiàn)下拉滾動加載數(shù)據(jù)的示例
這篇文章主要介紹了Vue實現(xiàn)下拉滾動加載數(shù)據(jù)的示例,幫助大家更好的理解和學習使用vue框架,感興趣的朋友可以了解下2021-04-04
vue常用事件v-on:click詳解事件對象,事件冒泡,事件默認行為
這篇文章主要介紹了vue常用事件之v-on:click?以及事件對象,事件冒泡,事件默認行為,其實v-on后面跟的不止是click事件也可以是其他的事件,用法均相似,本文通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下2022-08-08

