|
|
@@ -0,0 +1,83 @@
|
|
|
+import axios from 'axios'
|
|
|
+import qs from 'qs'
|
|
|
+// 在config.js文件中统一存放一些公共常量，方便之后维护
|
|
|
+import { baseURL } from './config.js'
|
|
|
+
|
|
|
+// 添加请求拦截器，在发送请求之前做些什么(**具体查看axios文档**)--------------------------------------------
|
|
|
+axios.interceptors.request.use(function (config) {
|
|
|
+ // 显示loading
|
|
|
+ return config
|
|
|
+}, function (error) {
|
|
|
+ // 请求错误时弹框提示，或做些其他事
|
|
|
+ return Promise.reject(error)
|
|
|
+})
|
|
|
+
|
|
|
+// 添加响应拦截器(**具体查看axios文档**)----------------------------------------------------------------
|
|
|
+axios.interceptors.response.use(function (response) {
|
|
|
+ // 对响应数据做点什么，允许在数据返回客户端前，修改响应的数据
|
|
|
+ // 如果只需要返回体中数据，则如下，如果需要全部，则 return response 即可
|
|
|
+ return response.data
|
|
|
+}, function (error) {
|
|
|
+ // 对响应错误做点什么
|
|
|
+ return Promise.reject(error)
|
|
|
+})
|
|
|
+
|
|
|
+// 封装数据返回失败提示函数---------------------------------------------------------------------------
|
|
|
+function errorState (response) {
|
|
|
+ // 隐藏loading
|
|
|
+ // 如果http状态码正常，则直接返回数据
|
|
|
+ if (response && (response.status === 200 || response.status === 304 || response.status === 400)) {
|
|
|
+ // 如果不需要除了data之外的数据，可以直接 return response.data
|
|
|
+ return response
|
|
|
+ } else {
|
|
|
+ alert('数据获取错误')
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 封装数据返回成功提示函数---------------------------------------------------------------------------
|
|
|
+function successState (res) {
|
|
|
+ // 隐藏loading
|
|
|
+ // 统一判断后端返回的错误码(错误码与后台协商而定)
|
|
|
+ if (res.data.code === '000000') {
|
|
|
+ alert('success')
|
|
|
+ return res
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 封装axios--------------------------------------------------------------------------------------
|
|
|
+function apiAxios (method, url, params) {
|
|
|
+ let httpDefault = {
|
|
|
+ method: method,
|
|
|
+ baseURL: baseURL,
|
|
|
+ url: url,
|
|
|
+ // `params` 是即将与请求一起发送的 URL 参数
|
|
|
+ // `data` 是作为请求主体被发送的数据
|
|
|
+ params: method === 'GET' || method === 'DELETE' ? params : null,
|
|
|
+ data: method === 'POST' || method === 'PUT' ? qs.stringify(params) : null,
|
|
|
+ timeout: 10000
|
|
|
+ }
|
|
|
+
|
|
|
+ // 注意**Promise**使用(Promise首字母大写)
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ axios(httpDefault)
|
|
|
+ // 此处的.then属于axios
|
|
|
+ .then((res) => {
|
|
|
+ successState(res)
|
|
|
+ resolve(res)
|
|
|
+ }).catch((response) => {
|
|
|
+ errorState(response)
|
|
|
+ reject(response)
|
|
|
+ })
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// 输出函数getAxios、postAxios、putAxios、delectAxios，供其他文件调用-----------------------------
|
|
|
+// Vue.js的插件应当有一个公开方法 install。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象。
|
|
|
+export default {
|
|
|
+ install: function (Vue) {
|
|
|
+ Vue.prototype.getAxios = (url, params) => apiAxios('GET', url, params)
|
|
|
+ Vue.prototype.postAxios = (url, params) => apiAxios('POST', url, params)
|
|
|
+ Vue.prototype.putAxios = (url, params) => apiAxios('PUT', url, params)
|
|
|
+ Vue.prototype.delectAxios = (url, params) => apiAxios('DELECT', url, params)
|
|
|
+ }
|
|
|
+}
|
