axios二次封装使用

1、新建utils文件夹，在文件夹里面新建request.js

  1 import axios from 'axios';
  2 import { Message, Loading } from 'element-ui'
  3 import qs from 'qs'; //参数序列化，把数据格式转为 x-www-form-urlencoded
  4 
  5 let BASE_URL = '', loadingInstance;
  6 let HOST = process.env.NODE_ENV;
  7 switch (HOST) {
  8     case 'development':
  9         BASE_URL = 'http://localhost:888';
 10         break;
 11     case 'test':
 12         BASE_URL = 'http://192.168.101.21/foxcubeCrm/';
 13         break;
 14     default:
 15         BASE_URL = 'http://192.168.101.21/foxcubeCrm/';
 16 }
 17 axios.create({
 18     //crossDomain: true,//设置cross跨域
 19     withCredentials: false,  //跨域请求是否允许携带cookie资源凭证
 20     baseurl: BASE_URL,
 21     time: 1000               //请求超时时间
 22     // responseType:"arraybuffer"  返回的数据格式
 23 
 24 
 25 })
 26 
 27 
 28 //  request请求拦截器
 29 axios.interceptors.request.use(config => {
 30 
 31     // let token=localstorage.getItem('token');
 32     // token && (config.headers.Authorization=token);//请求携带token
 33     // config.headers = {
 34     //     'Content-Type': 'application/x-www-form-urlencoded'  //转换数据格式
 35     // }
 36     loadingInstance = Loading.service({
 37         lock: true,
 38         text: '飞速加载中……',
 39     });
 40     return config;
 41 }, error => {
 42     return Promise.reject(error);
 43 })
 44 
 45 // 成功状态 有3的接口一般是资源重定向
 46 // service.defaults.validateStatus=status=>{
 47 //     return /^(2|3)\d{2}$/.test(status);
 48 // };
 49 
 50 
 51 // response响应拦截器
 52 axios.interceptors.response.use(response => {
 53     setTimeout(() => {
 54         loadingInstance.close();
 55     }, 300)
 56     return response;
 57 
 58 }, error => {
 59     setTimeout(() => {
 60         loadingInstance.close();
 61     }, 300)
 62     let { response } = error;
 63     if (response) {
 64         //服务器有返回内容
 65         var errormsg = '';
 66         switch (response.status) {
 67             case 400:
 68                 errormsg = '错误请求'
 69                 break;
 70             case 401:
 71                 errormsg = '未登录,请重新登录'
 72                 break;
 73             case 403:
 74                 errormsg = '决绝访问'
 75                 break;
 76             case 404:
 77                 errormsg = '请求错误，未找到该资源'
 78                 break;
 79             case 405:
 80                 errormsg = '请求方法未允许'
 81                 break;
 82             case 408:
 83                 errormsg = '请求超时'
 84                 break;
 85             case 500:
 86                 errormsg = '服务器出错'
 87                 break;
 88             case 501:
 89                 errormsg = '网络未实现'
 90                 break;
 91             case 502:
 92                 errormsg = '网络错误'
 93                 break;
 94             case 503:
 95                 errormsg = '服务不可用'
 96                 break;
 97             case 504:
 98                 errormsg = '网络超时'
 99                 break;
100             case 505:
101                 errormsg = 'http版本不支持该请求'
102                 break;
103             default:
104                 errormsg = '连接错误'
105         }
106         Message({ type: 'warning', message: errormsg });
107         return false;
108     } else {
109         //服务器连结果都没有返回  有可能是断网或者服务器奔溃
110         if (!window.navigator.online) {
111             //断网处理
112             Message('网络中断');
113             return;
114         } else {
115             //服务器奔了
116             Message('服务器奔了');
117             return Promise.reject(error);
118         }
119     }
120 })
121 
122 
123 /*
124 *get 方法，对应get请求
125 *@param {String} url [请求的url地址]
126 *@param {Object} params[请求携带的参数]]
127 */
128 
129 
130 export function get(url, params) {
131     return new Promise((resolve, reject) => {
132         axios.get(url, {
133             params: params
134         }).then(res => {
135             resolve(res.data);
136         }).catch(err => {
137             reject(err.data);
138         })
139     });
140 }
141 
142 
143 
144 /*
145 *post 方法，对应post请求
146 *@param {String} url [请求的url地址]
147 *@param {Object} params[请求携带的参数]]
148 */
149 
150 
151 export function post(url, params) {
152     return new Promise((resolve, reject) => {
153         axios.post(url, params)
154             .then(res => {
155                 resolve(res.data);
156             }).catch(err => {
157                 reject(err.data);
158             })
159     });
160 }
161 
162 
163 /*
164 *封装patch请求
165  *@param url
166  * @param params
167  * @returns {Promise}
168 */
169 
170 
171 export function patch(url, params) {
172     return new Promise((resolve, reject) => {
173         axios.patch(url, params)
174             .then(res => {
175                 resolve(res.data);
176             }, err => {
177                 reject(err);
178             })
179     })
180 }
181 
182 
183 /*
184 *put 请求
185 *@param url
186 * @param params
187 */
188 
189 
190 export function put(url, params) {
191     return new Promise((resolve, reject) => {
192         axios.put(url, params)
193             .then(res => {
194                 resolve(res.data);
195             }, err => {
196                 reject(err);
197             })
198     })
199 }

2.新建api文件夹，在api文件夹里创建对应模块的login.js，写接口调用的方法

1 import {post,get,put,patch} from '@/utils/request'
2 export const login = params =>post('/api/login',params)

3.在login.vue直接引入该方法就可以直接使用，即在相对应的页面调用

1 import { login } from "@/api/login";
2 login(data).then(res=>{
3 })

4.也可以在main.js引入直接到挂载到原型prototype上，即全局调用相应的请求方法

1 import { post, get, put, patch } from './utils/request'
2 // 挂载到原型上
3 Vue.prototype.$post = post;
4 Vue.prototype.$get = get;  //在需要使用请求数据的地方直接使用就ok
5 
6 　　this.$post('/api/login',data).then(res=>{
7          console.log(res)
8    })