如何用vue封裝axios請(qǐng)求
其實(shí)vue封裝axios是很簡(jiǎn)單的
首先 在src路徑下建http文件夾 并且創(chuàng)建api.js env.js request.js 這三個(gè)文件
env.js文件
這個(gè)文件主要就是封裝我們的公共地址
export default { // 開發(fā)環(huán)境 dev: { baseUrl: "開發(fā)環(huán)境公共地址" }, // 測(cè)試環(huán)境test test: { baseUrl: "測(cè)試環(huán)境公共地址" }, //線上接口 prod: { baseUrl: "線上環(huán)境公共地址" } };
request.js 文件
這里主要就是創(chuàng)建axios 以及封裝請(qǐng)求攔截和相應(yīng)攔截
import axios from "axios"; import env from "./env"; //這里是私有域名 但是也可以不寫 var vipUrl = "/app"; // 創(chuàng)建axios實(shí)例 const service = axios.create({ //這里拿線上接口測(cè)試 baseUrl: env.prod.baseUrl + vipUrl, headers:{},//請(qǐng)求頭 settimeout:2000,//超時(shí)時(shí)間 }); // 添加請(qǐng)求攔截器 service.interceptors.request.use( config => { // 在發(fā)送請(qǐng)求之前做些什么 config.headers["deviceType"] = "H5"; console.log("請(qǐng)求的數(shù)據(jù):", config); return config; }, error => { // 對(duì)請(qǐng)求錯(cuò)誤做些什么 return Promise.reject("出錯(cuò)", error); } ); // 添加響應(yīng)攔截器 service.interceptors.response.use( response => { // 對(duì)響應(yīng)數(shù)據(jù)做點(diǎn)什么 // console.log("返回的數(shù)據(jù)", response); return response; }, error => { // 對(duì)響應(yīng)錯(cuò)誤做點(diǎn)什么 return Promise.reject(error); } ); export default service;
api.js
這個(gè)文件中主要是需要的接口地址
//引入request.js文件 import request from "./request"; // 輪播 export function getBanners(data) { return request({ url: "/banner",//這個(gè)地址是去掉公共地址和私有域名之后剩下的地址 method: "GET",//請(qǐng)求方式 支持多種方式 get post put delete 等等 data//發(fā)送請(qǐng)求要配置的參數(shù) 無參數(shù)的情況下也可以不寫 }); }
最后是在頁面中的引用
那個(gè)頁面需要請(qǐng)求數(shù)據(jù) 就引入相應(yīng)的方法 比如我的首頁需要引入banner
<script> //引入需要的接口 import { getBanners } from "../http/api"; export default { name: "Home", components: {}, mounted() { //直接使用 .then 是請(qǐng)求成功的回調(diào) .catch是請(qǐng)求失敗的回調(diào) getBanners() .then(result => { window.console.log("111", result); }) .catch(err => { window.console.log("222", err); }); }, methods: {} }; </script>
以上就是如何用vue封裝axios請(qǐng)求的詳細(xì)內(nèi)容,更多關(guān)于用vue封裝axios請(qǐng)求的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
vue swipe自定義組件實(shí)現(xiàn)輪播效果
這篇文章主要為大家詳細(xì)介紹了vue swipe自定義組件實(shí)現(xiàn)輪播效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07項(xiàng)目中一鍵添加husky實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了項(xiàng)目中一鍵添加husky實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09使用element組件table表格實(shí)現(xiàn)某條件下復(fù)選框無法勾選
這篇文章主要介紹了使用element組件table表格實(shí)現(xiàn)某條件下復(fù)選框無法勾選問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03Vue使用Vue-cropper實(shí)現(xiàn)圖片裁剪
這篇文章主要為大家詳細(xì)介紹了Vue使用Vue-cropper實(shí)現(xiàn)圖片裁剪,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-05-05vue中實(shí)現(xiàn)div可編輯并插入指定元素與樣式
這篇文章主要給大家介紹了關(guān)于vue中實(shí)現(xiàn)div可編輯并插入指定元素與樣式的相關(guān)資料,文中通過代碼以及圖文將實(shí)現(xiàn)的方法介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09