vue簡單封裝axios插件和接口的統一管理操作示例

本文實例講述了vue簡單封裝axios插件和接口的統一管理操作。分享給大家供大家參考，具體如下：

現在很多公司的項目都是前后端分離的項目，那么說到前后端分離，必定會有ajax請求來獲得后臺的數據。

在做jquery項目的時候，我們都會使用它封裝好的方法來直接發起ajax請求。

在vue項目中，我們使用最多的就是axios這個插件，下面就簡單的封裝下這個插件并且把接口給統一化管理。

一、安裝和配置

1.在項目根目錄下打開終端安裝

1. npm install axios -S
2.  

2.安裝完成以后，在src目錄下創建utils目錄，用來存放用到的所有工具和插件（個人習慣）

3.在utils目錄創建request.js文件，用來配置axios，代碼如下：

1. import axios from 'axios' //引入axios
2. const service = axios.create({
3. // api 的 baseUrl 就是每個請求前面相同的地址，這個地方因為我配置了環境，所以直接取環境里的配置
4. baseURL: process.env.BASE_URL,
5. timeout: 5000 // 請求超時時間
6. })
7. // request攔截器
8. service.interceptors.request.use(
9. config => {
10. //這里是每個請求的設置，比如每個請求都攜帶一個token，或者當為post請求時，引入qs格式化參數。
11. return config
12. },
13. error => {
14. console.log('請求失敗:' + error)
15. Promise.reject(error)
16. }
17. )
18. // response 攔截器
19. service.interceptors.response.use(
20. response => {
21. const res = response.data
22. //這個地方的code自己與后臺約定(可以根據狀態碼，設置自己要提示的信息)
23. if (res._code !== '10000') {
24. //在此可以加幾種比較普遍的設置，然后可以把單獨的返到頁面中設置
25. return Promise.reject(res)
26. } else {
27. return response.data
28. }
29. },
30. error => {
31. console.log('響應失敗:' + error)
32. return Promise.reject(error)
33. }
34. )
35. export default service
36.  

二、使用

1.在src目錄下創建api文件夾，api文件夾與頁面文件夾目錄結構相同，名字最好也其相同語義的名字（個人習慣，方便管理）

2.比如我的頁面結構里有個manage目錄，里面有個user.vue頁面，那么相同的在api目錄下，也應有個manage目錄，里面有個user.js文件

3.user.js代碼如下：

1. //引入配置好的axios
2. import request from '@/utils/request'
3. //獲取用戶列表
4. export const getUserList = params => { return request({ url: '你的接口地址', method: 'get',params }) }
5. //增加用戶
6. export const addUser = data => { return request({ url: '你的接口地址', method: 'post', data }) }
7. //刪除用戶
8. export const delUser = data => { return request({ url: '你的接口地址', method: 'post', data }) }
9. //修改用戶信息
10. export const addUserInfo = data => { return request({ url: '你的接口地址', method: 'post',data }) }
11. //查詢用戶詳細信息
12. export const getUserDetail = params => { return request({ url: '你的接口地址', method: 'get',params }) }
13.  

4.user.vue代碼如下：

1. <script>
2. import userApi from '@/api/manage/user'
3. export default {
4. name: "User",
5. data(){
6. return {}
7. },
8. created(){
9. //不需要傳遞參數
10. userApi.getUserList()
11. .then( res => {
12. //成功回調
13. })
14. .catch( err => {
15. //失敗回調
16. })
17. //需要傳遞參數
18. let userInfo = {
19. name: '張三',
20. age: 18
21. }
22. userApi.addUser(userInfo)
23. .then( res => {
24. //成功回調
25. })
26. .catch( err => {
27. //失敗回調
28. })
29. }
30. }
31. </script>
32.  

附常見狀態碼：

1. const status = error.response.status;
2. let msg = "";
3. switch (status) {
4. case 400:
5. msg = "錯誤的請求"
6. break;
7. case 401:
8. msg = "未授權，請重新登錄"
9. break;
10. case 403:
11. msg = "拒絕訪問"
12. break;
13. case 404:
14. msg = "未找到該接口地址"
15. break;
16. case 405:
17. msg = "請求未被允許"
18. break;
19. case 408:
20. msg = "請求超時"
21. break;
22. case 500:
23. msg = "服務端出錯了"
24. break;
25. case 501:
26. msg = "網絡未實現"
27. break;
28. case 502:
29. msg = "網絡錯誤"
30. break;
31. case 503:
32. msg = "服務不可用"
33. break;
34. case 504:
35. msg = "網絡超時"
36. break;
37. case 505:
38. msg = "http版本不支持"
39. break;
40. default:
41. msg = "連接錯誤"
42. break;
43. }
44.  

希望本文所述對大家vue.js程序設計有所幫助。