1.安裝

1 npm install axios --save

2.新建http.js，封裝攔截器以及多種請求方式

 1 import axios from ‘axios‘;
 2 import { Message } from ‘element-ui‘;
 3 
 4 // 請求攔截器
 5 axios.interceptors.request.use( 
 6   config => {
 7     //發送請求前需要做什麽，一般檢查token
 8     return config;
 9   },
10 
11   error => {
12    // 對請求錯誤做些什麽
13
 
     return Promise.reject(error);
14   }
15 )
16 
17 // 響應攔截器
18 axios.interceptors.response.use(
19   response => {
20     // 對響應數據做點什麽,一般是判斷狀態碼，進行一些邏輯處理
21     return response;
22   },
23   error => {
24     // 對響應錯誤做點什麽
25     return Promise.reject(error) ;
26   };
27 )
28 
29 //GET請求
30 export const $get = function
 
 (url, params) {
31   return new Promise((resolve, reject) => {
32     axios({
33       method: ‘get‘,//請求方式
34       url: url,         //請求url
35       headers:...   //請求頭設置,
36       params,      //請求參數
37       baseURL: ...//基礎地址,將自動加在 `url` 前面
38     }).then(res => {
39       resolve(res)
40     }).catch
 
(error => {
41       reject(error)
42     })
43   })
44 }
45 
46 //POST請求
47 export const $post = function (url, param) {
48   return new Promise((resolve, reject) => {
49     axios({
50       method: ‘post‘,
51       url: url,
52       headers: ...,
53       data: param ? param : "", //數據體
54       baseURL: ...
55     }).then(res => {
56       resolve(res)
57     }).catch(error => {
58       reject(error)
59     })
60   })
61 }
62 
63 //DELETE請求
64 export const $delete = function (url, params) {
65   return new Promise((resolve, reject) => {
66     axios({
67       method: ‘delete‘,
68       url: url,
69       headers: ...,
70       params,
71       baseURL: ...
72     }).then(res => {
73       resolve(res)
74     }).catch(error => {
75       reject(error)
76     })
77   })
78 }
79 
80 //PUT請求
81 export const $put = function (url, params) {
82   return new Promise((resolve, reject) => {
83     axios({
84       method: ‘put‘,
85       url: url,
86       headers: ...,
87       data: params ? params : "",
88       baseURL: ...
89     }).then(res => {
90       resolve(res)
91     }).catch(error => {
92       reject(error)
93     })
94   })
95 }

3.接口的封裝---新建user.js

 1 //導入請求方式
 2 import {
 3   $get,
 4   $post,
 5   $update,
 6   $delete
 7 } from ‘../http‘; 
 8 
 9 //獲取用戶信息接口
10 const getUser = data => {
11   return $get(‘/api/getUserInfo‘, data);
12 };
13 
14 //其他接口類似
15 ....
16 ....
17 ....
18 
19 //導出接口
20 export default {
21 getUser,
22 ...,
23 ...
24 }

4.封裝所有接口文件---創建index.js

1 //導入接口文件
2 import user from ‘./user‘
3 
4 //導出
5 export default {
6   user,
7   ...,
8   ...
9 }

5.axios的所有內容封裝（該index.js即為下圖目錄結構選中的js文件）

目錄結構

6.在組件中的使用

 1 methods:{
 2     //方法的調用，傳入數據
 3     getUser(){
 4          this.$api.user.getUser({userId：100010})
 5             .then(
 6                 res=>{
 7                 //請求結果，進行相應的邏輯處理
 8                 },
 9                 error=>{
10                 //請求失敗後的邏輯處理
11                 })
12       }    
13 }            

vue項目中axios的封裝