feat: 优化axios封装

src/api/api.js

@@ -1,14 +1,11 @@
-import httpAjax from './httpAjax.js'
+/**请求路径
+ * 
+ */
+import { post } from '@/api/request'
 
-class httpApi {
+export default {
-
+	// 登录
-	//手机登录接口
+  loginAdminTest: params => {
-	loginAdminTest = data => httpAjax({
+    return post('/loginAdminTest', params)
-		url: '/loginAdminTest',
+  }
-		data,
+}
-		method: 'post'
-	})
-	
-}
-
-export default new httpApi()

src/api/httpAjax.js

@@ -1,20 +0,0 @@
-import axios from "axios"
-import Qs from "qs"
-import { Message } from 'element-ui';
-// 请求封装
-export default function httpAjax (config) {
-    return new Promise((resolve, reject) => {
-        const method = config.method ? config.method.toLowerCase() : "get"
-        if(!config.data) config.data = {}
-        if(['delete', 'get', 'head', 'options'].some(item => item === method)) {
-            config.params = config.data
-            delete config.data
-        }else if (config.header === "form" && ['post', 'put', 'patch'].some(item => item === method)) config.data = Qs.stringify(config.data)
-        // 响应拦截
-        axios(config).then(response => {
-          if(!response.data.success) return Message.success('测试环境');
-          resolve(response.data)
-        }).catch( error => reject(error))
-    })
-}
-

src/api/request.js

@@ -1,41 +1,126 @@
-import axios from 'axios'
+/**
-import Vue from 'vue'
+ * axios封装
-let base = window.global_config.BASE_URL;
+ * 请求拦截、相应拦截、错误统一处理=
+ */
 
-
+ import { Toast } from 'vant';
-// 推广链接
+ import axios from 'axios'
-Vue.prototype.$baseURL ='https://wshop.starfirelink.com/'
+ 
-
+ let loadingInstance = null				// 全局加载loadding
-// 请求域名
+ 
-axios.defaults.baseURL = base
+ const instance = axios.create({    //创建axios实例
-
+   timeout: 10000, // 设置超时时间10s
-axios.defaults.withCredentials=true
+   baseURL: window.global_config.BASE_URL		  // 请求配置静态文件config/config.js		dev模式下为 api 走代理模式
-
+ })
-// 请求拦截器
+ 
-/* axios.interceptors.request.use(
+ 
-  config => {
+ // 设置默认请求头
-    return config
+ instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
-  },
+ 
-  error => {
+ // 跨域允许携带cookie
-    return error
+ instance.defaults.withCredentials = true 
-  }
+ 
-) */
+ // 请求拦截器
-
+ instance.interceptors.request.use(
-// 响应拦截器
+   request => {
-axios.interceptors.response.use(
+     // 在发送请求前验证token 并添加token请求头
-  response => {
+     // if (getToken()) request.headers['token'] = getToken()
-    const res = response.data
+     loadingInstance = Toast.loading({
-    // 1002:非法令牌和令牌过期 5012:其他客户端登录
+       message: '拼命加载中...',
-    if (res.code === 1002 || res.code === 9018 || res.code === 9996) {
+       forbidClick: true,
-      // 清除全部数据
+       duration: 0,
-     /*  localStorage.clear() */
+       overlay: true,
-      // 返回登录页面
+       loadingType: 'spinner'
-      /* router.push({path: '/personalCourse'}) */
+     });
-    }
+     
-    return response
+     if (request.method === 'get') { // 添加时间戳参数，防止浏览器（IE）对get请求的缓存
-  },
+       request.params = {
-  error => {
+         ...request.params,
-    /* Toast("操作失败，请重新操作") */
+         t: new Date().getTime()
-    return error
+       }
-  }
+     }
-)
+ 
+     return request
+   },
+   error => {
+     return error
+   }
+ )
+ 
+ // 响应拦截
+ instance.interceptors.response.use(
+   response => {
+ 
+     if (loadingInstance) {
+       loadingInstance.clear()
+     }
+ 
+     let code = response.data.code
+     let status = response.status
+     // 1002:非法令牌和令牌过期 5012:其他客户端登录  6005 登录过期
+     if (code === 1002 || code === 5012 || code == 6005) {
+       // 清除本地所有数据
+       // localStorage.clear()
+     }
+ 
+     // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据 
+     if (status === 200) { // 请求成功
+       return Promise.resolve(response.data)
+     } else { // 错误的请求  抛出错误
+       return Promise.reject(response)
+     }
+   },
+ 
+   error => {
+ 
+     if (loadingInstance) {
+       loadingInstance.clear()
+     }
+     if (error.response) {
+       // 根据请求失败的http状态码去给用户相应的提示
+ 
+       return Promise.reject(error)
+     } else {
+       console.error(`请求错误${error}`)
+       return Promise.reject(new Error('请求超时, 请刷新重试'))
+     }
+ 
+   }
+ 
+ )
+ 
+ 
+ /**
+  * get方法，对应get请求
+  * @param {String} url [请求的url地址]
+  * @param {Object} params [请求时携带的参数]
+  */
+ export function get(url, params) {
+   return new Promise((resolve, reject) => {
+     instance.get(url, {
+       params: params
+     }).then(res => {
+       resolve(res.data);
+     }).catch(err => {
+       reject(err.data)
+     })
+   })
+ }
+ 
+ /** 
+  * post方法，对应post请求 
+  * @param {String} url [请求的url地址] 
+  * @param {Object} params [请求时携带的参数] 
+  */
+ export function post(url, params) {
+   return new Promise((resolve, reject) => {
+     instance.post(url, params)
+       .then(res => {
+         resolve(res.data);
+       })
+       .catch(err => {
+         reject(err.data)
+       })
+   });
+ }
+