Vue封裝axios請求

為了方便呼叫api介面，我們封裝axios請求

http.js檔案中寫入:

import axios from 'axios'

axios.defaults.baseurl=""
axios.defaults.timeout = 1000000;
axios.interceptors.request.use(
config => 
return config;
},error => )
axios.interceptors.response.use(
// 請求成功
res => res.status === 200 ? promise.resolve(res) : promise.reject(res),
// 請求失敗
error => )
window.location.href=""
}else
// 請求已發出，但是不在2xx的範圍
} else 
});// 封裝xiaos請求  封裝axios裡的get
export function axios_get(url,params))
.then(res=>).catch(err=>)})
}export function axios_post(url,data)).catch(err=>)})
}export function axios_put(url,data)).catch(err=>)})
}export function axios_delete(url,data))
.then(res=>).catch(err=>)})
}

import  from './http.js'

登入

登入

import vue from 'vue'

import router from 'vue-router'
import index from '@/components/index'
vue.use(router)
var routes = [
,]export default new router()

npm run dev

vue 封裝axios請求

最近接手新的vue專案，發現axios竟然沒有封裝，立馬動手封裝，這裡記錄一下完整的封裝過程，廢話不說，直接上 baseconfig.js檔案 存放各個伺服器的位址 const express require express const proenv require pro.env 生產環境配置檔案...

vue封裝axios請求

新建檔案src utils request.js import axios from axios 自定義配置建立axios的新例項 const service axios.create 無論請求為何種型別，在params中的屬性都會以key value的格式在urlzhong拼 headers 請求...

Vue全域性封裝axios請求

一 簡介 使用vue開發專案時，資料請求不再使用原生的ajax來請求資料，vue官方庫提供的vue resource已經不再更新和維護，現在新專案基本都以axios作為主要請求方式 二 使用 本例以post單例請求為例 axios then res catch err 三 封裝axios 分析 ax...