本文例項為大家分享了Vue+axios封裝請求實現前後端分離的具體程式碼，供大家參考，具體內容如下

前言

我們需要進行前後端分離開發，那麼前後端的跨域問題就是無可避免的問題，前後端的請求也是無可避免的，Vue之中有一個請求元件是axios，我們可以對axios進行封裝作為我們請求的工具元件

# 一、封裝axios
vue.config.js 配置檔案

module.exports = {
 configureWebpack: {
 resolve: {
  alias: {
  api: '@/api',assets: '@/assets',components: '@/components',layouts: '@/layouts',router: '@/router',store: '@/store',utils: '@/utils',views: '@/views'
  }
 }
 },devServer: {
 //埠
 port: 8081,//後端介面
 proxy: {
  '/api': {
  target: 'http://localhost:8099',// 目標代理介面地址
  changeOrigin: true,// 開啟代理，在本地建立一個虛擬服務端
  // ws: true,// 是否啟用websockets
  pathRewrite: {
   '^/api': ''
  }
  }
 }
 }
}

request.js，封裝元件

//配置axios
import axios from 'axios'

const instance = axios.create({
 baseURL: '/api',timeout: 6000
})


instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
//請求攔截器
instance.interceptors.request.use(
 function(config) {
 return config
 },function(error) {
 //對請求錯誤做些什麼
 return Promise.reject(error)
 }
)
//響應攔截器
instance.interceptors.response.use(
 function(response) {
 return response.data
 },function(error) {
 //對響應錯誤做點什麼
 return Promise.reject(error)
 }
)

export default function(method,url,data = '',config = '') {
 method = method.toLowerCase()
 if (method === 'post') {
 if (config !== '') {
  return instance.post(url,data,config)
 } else {
  return instance.post(url,data)
 }
 } else if (method === 'get') {
 return instance.get(url,{params: data})
 } else if (method === 'delete') {
 return instance.delete(url,{params: data})
 } else if (method === 'put') {
 return instance.put(url,data)
 } else {
 console.error('未知的method' + method)
 return false
 }
}

api.js，介面檔案

import req from '@/utils/request'

/**
 * 批量查詢
 * @param params
 */
export const list = params => req("get","/resource/list",params);

具體的頁面之中進行匯入使用即可

總結

這就是vue中對於axios的初步封裝使用，後續會持續更新

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。