在vue项目中首先 npm 命令安装 axios: npm install axios -S
axios 的封装使用请求带上token，token通过登录获取存在vuex，为防止刷新丢失token使用持久化 vuex-persistedstate 插件保存数据
npm i -S vuex-persistedstate
1import persistedState from 'vuex-persistedstate' 2export default new Vuex.Store({ 3 // ... 4 plugins: [persistedState()] 5})
axios 的封装可以全局捕捉接口异常或者是断网的情况的处理，也可以优化接收到的后台数据，处理后返回至前端，首先还是在 src 文件夹下创建 api 文件夹，创建一个封装 axios 的JS文件，命名为：https.js ，然后在 main.js 文件配置全局
https.js 文件
1import axios from 'axios' 2import { Message } from 'view-design'; // 引入iview的消息提示组件，用于提示接口的报错等 3import store from '../store/index'; // 引入vuex-store 4// 创建axios实例 5axios.defaults.withCredentials = true; 6const httpService = axios.create({ 7 baseURL: "", // 需自定义 // url前缀-'http:xxx.xxx' 8 timeout: 900000, // 需自定义 请求超时时间 十五分钟 9 withCredentials: false, // `withCredentials` 表示跨域请求时是否需要使用凭证 10}); 11 12// request拦截器 13httpService.interceptors.request.use( 14 config => { 15 if (store.state.token) { 16 console.log(store.state.token); 17 config.headers['token'] = store.state.token // 让每个请求携带自定义token 请根据实际情况自行修改 18 } 19 return config; 20 }, 21 error => { 22 // 请求错误处理 23 return Promise.reject(error); 24 } 25) 26 27// respone拦截器 28httpService.interceptors.response.use( 29 response => { 30 let msg = "" 31 if (response.status == 200) { 32 switch (response.data.code) { 33 case 1000: 34 msg = response.data.msg 35 // Message['success']({ 36 // background: true, 37 // content: msg, 38 // duration: 3 39 // }) 40 break; 41 default: 42 msg = response.data.msg 43 Message['error']({ 44 background: true, 45 content: msg, 46 duration: 10, 47 closable: true 48 }) 49 50 } 51 // 统一处理状态 52 return Promise.resolve(response.data.data) 53 } else { 54 return Promise.reject(response) 55 } 56 }, 57 // 处理处理 58 error => { 59 if (error && error.response) { 60 switch (error.response.status) { 61 case 400: 62 error.message = '错误请求'; 63 break; 64 case 401: 65 error.message = '未授权，请重新登录'; 66 break; 67 case 403: 68 error.message = '拒绝访问'; 69 break; 70 case 404: 71 error.message = '请求错误,未找到该资源'; 72 break; 73 case 500: 74 error.message = '服务器端出错'; 75 break; 76 default: 77 error.message = `未知错误${error.response.status}`; 78 } 79 Message['error']({ 80 background: true, 81 content: error.message, 82 duration: 10, 83 closable: true 84 }) 85 } else { 86 error.message = "连接到服务器失败"; 87 Message['error']({ 88 background: true, 89 content: error.message, 90 duration: 10, 91 closable: true 92 }) 93 } 94 return Promise.reject(error); 95 } 96) 97 98/*网络请求部分*/ 99 100/* 101 * get请求 102 * url:请求地址 103 * params:参数 104 * */ 105export function get(url, params = {}) { 106 return new Promise((resolve, reject) => { 107 httpService({ 108 url: url, 109 method: 'get', 110 params: params 111 }).then(response => { 112 resolve(response); 113 }).catch(error => { 114 reject(error); 115 }); 116 }); 117} 118 119 120/* 121 * delete请求 122 * url:请求地址 123 * params:参数 124 * */ 125export function del(url, params = {}) { 126 return new Promise((resolve, reject) => { 127 httpService.delete(url, { 128 params: params 129 }).then(response => { 130 resolve(response); 131 }).catch(error => { 132 reject(error); 133 }); 134 }); 135} 136 137/* 138 * delete请求体 139 * url:请求地址 140 * params:参数 141 * */ 142export function delc(url, params = {}) { 143 return new Promise((resolve, reject) => { 144 httpService.delete(url, { 145 data: params 146 }).then(response => { 147 resolve(response); 148 }).catch(error => { 149 reject(error); 150 }); 151 }); 152} 153 154/* 155 * post请求 156 * url:请求地址 157 * params:参数 158 * */ 159export function post(url, params = {}) { 160 return new Promise((resolve, reject) => { 161 httpService.post(url, params) 162 .then(response => { 163 resolve(response); 164 }) 165 .catch(error => { 166 reject(error); 167 }) 168 // httpService({ 169 // url: url, 170 // method: 'post', 171 // data: params 172 // }).then(response => { 173 // resolve(response); 174 // }).catch(error => { 175 // reject(error); 176 // }); 177 }); 178} 179 180/* 181 * put请求 182 * url:请求地址 183 * params:参数 184 * */ 185export function put(url, params = {}) { 186 return new Promise((resolve, reject) => { 187 httpService.put(url, params) 188 .then(response => { 189 resolve(response); 190 }) 191 .catch(error => { 192 reject(error); 193 }) 194 }); 195} 196 197/* 198 * 文件上传 199 * url:请求地址 200 * params:参数 201 * */ 202export function upload(url, params = {}) { 203 return new Promise((resolve, reject) => { 204 httpService({ 205 url: url, 206 method: 'post', 207 data: params, 208 headers: { 'Content-Type': 'multipart/form-data' } 209 }).then(response => { 210 resolve(response); 211 }).catch(error => { 212 reject(error); 213 }); 214 }); 215} 216 217export default { 218 get, 219 del, 220 delc, 221 post, 222 put, 223 upload 224}
在 main.js 文件里引用 https
1import http from '@/api/https.js' 2 3Vue.prototype.$http = http
页面调用
1this.$http.get(url, { custcode: "" }).then(res =>{}) 2this.$http.post(url, { data }).then(res =>{}) 3this.$http.put(url, { data }).then(res =>{}) 4this.$http.del(url, { id: "" }).then(res =>{})
本文转自 https://www.jianshu.com/p/8b44185e2ec4，如有侵权，请联系删除。