vue项目中axios的封装

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 }

View Code