feat: 优化了axios loading和错误逻辑。

package.json

@@ -57,7 +57,6 @@
       "plugin:vue/essential",
       "eslint:recommended"
     ],
-    "rules": {},
     "parserOptions": {
       "parser": "babel-eslint"
     }
@@ -82,4 +81,4 @@
       "path": "./node_modules/cz-conventional-changelog"
     }
   }
-}
+}

src/base/confirm.vue

@@ -5,7 +5,7 @@
     :width="$utils.toRem(320)"
     class="confirm-dialog"
   >
-    <div slot="title">提示</div>
+    <div slot="title">{{title || '提示'}}</div>
     <div class="confirm-body">{{text}}</div>
     <span
       class="dialog-footer"
@@ -24,10 +24,10 @@
 import Vue from "vue"
 const Confirm = {
   name: "Confirm",
-  props: ["visible", "text", "onConfirm"],
+  props: ["visible", "text", "title", "onConfirm"],
   methods: {
     confirmAndClose() {
-      this.onConfirm()
+      this.onConfirm && this.onConfirm()
       this.visible = false
     }
   }
@@ -38,14 +38,18 @@ export default Confirm
 // 单例减少开销
 let instanceCache
 // 命令式调用
-export const confirm = function(text, onConfirm = () => {}) {
-  const ConfirmCtor = Vue.extend(Confirm)
+export const confirm = function(text, title, onConfirm = () => {}) {
+  if (typeof title === "function") {
+    onConfirm = title
+  }
 
+  const ConfirmCtor = Vue.extend(Confirm)
   const getInstance = () => {
     if (!instanceCache) {
       instanceCache = new ConfirmCtor({
         propsData: {
           text,
+          title,
           onConfirm
         }
       })
@@ -55,6 +59,7 @@ export const confirm = function(text, onConfirm = () => {}) {
     } else {
       // 更新属性
       instanceCache.text = text
+      instanceCache.title = title
       instanceCache.onConfirm = onConfirm
     }
     return instanceCache

src/utils/axios.js

@@ -1,40 +1,36 @@
 import axios from 'axios'
+import { confirm } from '@/base/confirm'
 import { Loading } from 'element-ui'
 
 const BASE_URL = '/netease-api'
-let loading
-let loadingCount = 0
-
 // 不带全局loading的请求实例
 export const requestWithoutLoading = createBaseInstance()
 // 带全局loading的请求实例
 // 传入函数是因为需要在处理请求结果handleResponse之前处理loading
 // 所以要在内部插入loading拦截器的处理逻辑
-export const request = createBaseInstance(mixinLoading)
-
+export const request = createBaseInstance()
+mixinLoading(request.interceptors)
 // 通用的axios实例
-function createBaseInstance(addBeforeIntercetors) {
+function createBaseInstance() {
   const instance = axios.create({
     baseURL: BASE_URL,
   })
 
-  addBeforeIntercetors && addBeforeIntercetors(instance.interceptors)
   instance.interceptors.response.use(handleResponse, handleError)
   return instance
 }
 
 function handleError(e) {
-  throw new Error(e)
+  confirm(e.message, '出错啦~')
+  throw e
 }
 
 function handleResponse(response) {
-  if (response.status === 200) {
-    return response.data
-  } else {
-    handleError(response.statusText)
-  }
+  return response.data
 }
 
+let loading
+let loadingCount = 0
 function mixinLoading(interceptors) {
   interceptors.request.use(loadingRequestInterceptor)
   interceptors.response.use(
@@ -69,7 +65,6 @@ function mixinLoading(interceptors) {
 
   function loadingResponseErrorInterceptor(e) {
     handleResponseLoading()
-    // 这里要把错误的response传递下去
-    return e.response
+    throw e
   }
 }

vue.config.js

@@ -1,6 +1,7 @@
 module.exports = {
   configureWebpack: {
     devServer: {
+      open: true,
       proxy: {
         '/netease-api': {
           target: 'http://localhost:3000',