前言:阅读这篇文章前建议先看一下前置知识点指路:优化trycatch所需的前置知识点_多多的小宝贝的博客-CSDN博客

啦啦啦~通过前面的知识我们已经知道:promise对象的then方法中虽然不能直接获取到请求失败的结果,但是我们可以借助一个新的Promise对象来中转一下,这样就可以在Promise对象的then方法中取到请求失败的结果啦~

实现思路:利用promise对象A then方法返回的那个全新Promise对象B(全新:意思就是他就是他,和别的Promise对象不一样,是独立存在的)来中转,用这个全新Promise对象B的then,catch方法来收集成功失败的结果,并且在then catch 方法中return 成功/失败的结果,这样一来,这个return 出来的结果就会被这个then返回的全新Promise对象C 的then收集啦~这里不好理解,要静下心好好琢磨!加油~~

下面就开始优化trycatch啦~~

一、看看优化的代码的样子

1.1.调接口发请求

async clickFn(){
    try {
        //调用接口
        const res = await loginAPI(this.loginForm) //this.loginForm是接口参数,可忽略
        console.log(res)
        alert(res.message)
     }catch (error) { 
        alert(error.message)
        }
   }

1.2.接口的封装代码

export const loginAPI = (data) => {
  return request({
    url: '/sys/login',
    method: 'POST',
    data
  })
}

2.利用promise对象实现优化

2.1封装优化的工具函数

//按需带出封装的函数方法
export const to = (promiseA) => {
  // 传入原来Promise对象, 我这里负责成功/失败结果的接收
  const PromiseB = promiseA.then(res => {
    return [null, res]
  }).catch(err => {
    return [err, null]
  })
   //这里用来统一接处理成功/失败结果
  return PromiseB
}
// axios内响应拦截器用success判断
// 返回成功就进上面的then, 返回失败进catch
// 原来是直接返回到逻辑页面, 而这里被to包进来
// 先走这里中转一下, 在return一个数组给逻辑页面

2.2更改接口文件

import request from '这里是我的axios请求文件路径'
export function loginAPI(data) {
  const axiosPromiseA = request({
    url: '/sys/login',
    method: 'POST',
    data
  })
  return to(axiosPromiseA) // 被中间的Promise过程处理,返回promiseB
}

2.3逻辑页面调用接口

async clickFn(){
    const [err, res] = await loginAPI(this.loginForm)
        if (!err) {
            console.log(res) //打印成功结果
            alert(res.message)
        } else{
            console.error(err) //打印错误信息
             alert(err)
        }
          
  }

2.4 axios请求文件代码

import axios from 'axios'
// create an axios instance
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, //配置基地址
  timeout: 5000 // request timeout
})

// 请求拦截器
service.interceptors.request.use(
  config => {
    // do something before request is sent
    return config
  },
  error => {
    // do something with request error
    return Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(// 对响应做些什么(但是什么都不写默认)
  response => { // 默认2xx, 3xx开头的http响应状态码进入这里-返回成功
    console.log(response)
    // 利用解构赋值写法
    const { success, message } = response.data// 把后台返回的数据对象, 解构赋值
    if (success) { // 解构赋值写法
      return response.data // 直接把后台返回的数据对象返回到axios请求的地方
    } else {
      // 返回Promise失败对象(内部错误提示文字)
      return Promise.reject(message)// 解构赋值写法
    }
  },
  error => { // 默认4xx, 5xx开头的http响应状态码进入这里-返回失败(await不放行)
    return Promise.reject(error)
  }
)

export default service

优化trycatch(完结)