其實vue封裝axios是很簡單的

首先 在src路徑下建http文件夾 并且創建api.js env.js request.js 這三個文件

env.js文件

這個文件主要就是封裝我們的公共地址

export default {// 開發環境dev: { baseUrl: '開發環境公共地址'},// 測試環境testtest: { baseUrl: '測試環境公共地址'},//線上接口prod: { baseUrl: '線上環境公共地址'}};

request.js 文件

這里主要就是創建axios 以及封裝請求攔截和相應攔截

import axios from 'axios';import env from './env';//這里是私有域名 但是也可以不寫var vipUrl = '/app';// 創建axios實例const service = axios.create({//這里拿線上接口測試baseUrl: env.prod.baseUrl + vipUrl, headers:{},//請求頭 settimeout:2000,//超時時間});// 添加請求攔截器service.interceptors.request.use(config => { // 在發送請求之前做些什么 config.headers['deviceType'] = 'H5'; console.log('請求的數據:', config); return config;},error => { // 對請求錯誤做些什么 return Promise.reject('出錯', error);});// 添加響應攔截器service.interceptors.response.use(response => { // 對響應數據做點什么 // console.log('返回的數據', response); return response;},error => { // 對響應錯誤做點什么 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//發送請求要配置的參數 無參數的情況下也可以不寫});}

最后是在頁面中的引用

那個頁面需要請求數據 就引入相應的方法 比如我的首頁需要引入banner

<script>//引入需要的接口import { getBanners } from '../http/api';export default {name: 'Home',components: {},mounted() { //直接使用 .then 是請求成功的回調 .catch是請求失敗的回調 getBanners() .then(result => {window.console.log('111', result); }) .catch(err => {window.console.log('222', err); });},methods: {}};</script>

以上就是如何用vue封裝axios請求的詳細內容，更多關于用vue封裝axios請求的資料請關注好吧啦網其它相關文章！