关于promise的多层调用

A函数： axios的拦截器封装

import axios from 'axios'
import {Message} from 'element-ui'
import store from '@/store'

// 创建axios实例
const service = axios.create({
    timeout: 5000 // request timeout
})

// 响应拦截器
service.interceptors.response.use(
    response => {
        // http请求返回状态200

        // 后端返回的数据
        const res = response.data

        if (res.code !== 20000) {
            if (res.code === 80000 || res.code === 80005 || res.code === 80010) {
                // 这些状态，说明token失效，需要重新登录
                Message({type: "info", message: "token失效，重新登录"})
                store.dispatch('user/resetToken').then(() => {
                    location.reload()
                })
            } else {
                // 发出接口异常告警
                // 状态非20000， 接口是正常返回，但数据不是正常所期望的数据(属于后端定义的异常)
                Message({
                    type: "error",
                    message: "[异常]响应拦截器返回信息：接口请求异常，请联系管理员 " + response.request.responseURL + " 状态码：" + res.code
                })
                return Promise.reject("[异常]响应拦截器返回信息：接口请求异常，请联系管理员")
            }
        } else {
            // 状态20000，返回后端的[data]数据部分
            return Promise.resolve(res.data)
        }
    },
    error => {
        // http请求返回状态非200

        // 页面消息提示
        Message({type: "error", message: "[错误]响应拦截器返回信息：接口请求错误，请联系管理员" + error.response.request.responseURL})

        // 控制台里输出请求的url和返回的状态码
        console.log("[错误]响应拦截器返回信息：")
        console.log("URL：", error.response.request.responseURL, "; 状态码：", error.response.request.status)

        // 设置异步请求状态为失败
        Promise.reject("[错误]响应拦截器返回信息：接口请求错误，请联系管理员")
    }
)

B函数： 通过封装的axios去调用后端一接口

export function api_function() {
    return new Promise((resolve, reject) => {
        request({url: '/api/function', method: 'get'}).then(res => {
            resolve(res)
        }).catch(err => {
            reject(err)
        })
    })
}

C函数：vue文件里调用B函数的方法

created: async function () {
            await api_funs().then(res => {
                this.sections = res
            }).catch(err => {
                this.$message({message: err})
            })
        }

调用关系是C --> B --> A

A这里有Promise.reject(error)，B C函数中.catch(err => {})获取到err错误，就是A中 `Promise.reject(error)` 返回的错误。所以，不是因为特殊原因（就算接口数据异常，也要返回失败的数据），B C中的catch部门可以省略。