vue專案中封裝axios

首先，配置axios***，在專案src目錄下建立request.js:

import axios from 'axios'

import store from '@/store'
import  from 'ant-design-vue';
import  from 'ant-design-vue';
import vue from 'vue';
import  from 'element-ui';
let loadinginstance = loading.service(); //為所有請求新增loading
// 建立axios例項
const service = axios.create(,
timeout: 15000 // 請求超時時間
});// 請求發出前的***
service.interceptors.request.use((req) => 
return req
}, (error) => );
// 響應的***
service.interceptors.response.use(
function(response) ,
function(error) 
} else ;
// 請求錯誤則向store commit這個狀態變化
});export default service

定義乙個簡單的store.js

import vue from 'vue' 

export default 
},mutations:
}}

實際工程中，我們每個頁面都會有很多的請求，這些請求都應該寫成api，儲存在api資料夾裡，方便呼叫，而不是直接寫在頁面中，我們通過乙個例子簡單進行介紹，封裝get方法：

工程目錄src/api/下建立testapi.js檔案：

import request from '@/request'

export function get (url, params = {}) )
.then(response => )
.catch(err => )
})}

import  from './api/testapi'

const table = 
}const userpath = 
export default userpath

import axios from './common/index'

vue.prototype.$axios = axios
export default ,
data () ,
loading: false,
columns}},
methods: 
pager.current = pagination.current
this.fetch()
},fetch (params = {}) ).then(data => 
// read total count from server
// pagination.total = data.totalcount;
pagination.total = 200
this.loading = false
this.data = data.results
this.pagination = pagination})}
}}

vue專案中封裝axios

axios.defaults.timeout 100000 請求超時時間。請求位址 其實做到這裡也可以，不用去單獨封裝get post 等請求也可以直接呼叫的。然後就可以在vue頁面去呼叫了 mounted function then function response catch function...

vue專案中封裝axios請求

1.前言 之前是我負責這個專案的搭建，及打包上線，整個專案都是我乙個人來做，所以介面寫的遍地都是，造成了瀏覽起來很難受，不便於維護 所以就打算封裝一下axios 建立乙個apis 的js檔案來集中管理介面，走著！首先考慮的是通過promise來封裝axios，使 看起來更清晰明了 2.1 專案中引入...

專案中封裝的axios

把每個一級選單按照模組去區分在urls檔案中進行統一管理 把get 和post請求進行攔截，以此進行方便頁面傳參，get和post傳參方式一樣方便使用。main.ts中 import post from apis index vue.prototype.post post 掛載到全域性將 postr...