关于promise的多层调用
A函数: axios的拦截器封装
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 import axios from 'axios' 2 import {Message} from 'element-ui' 3 import store from '@/store' 4 5 // 创建axios实例 6 const service = axios.create({ 7 timeout: 5000 // request timeout 8 }) 9 10 // 响应拦截器 11 service.interceptors.response.use( 12 response => { 13 // http请求返回状态200 14 15 // 后端返回的数据 16 const res = response.data 17 18 if (res.code !== 20000) { 19 if (res.code === 80000 || res.code === 80005 || res.code === 80010) { 20 // 这些状态,说明token失效,需要重新登录 21 Message({type: "info", message: "token失效,重新登录"}) 22 store.dispatch('user/resetToken').then(() => { 23 location.reload() 24 }) 25 } else { 26 // 发出接口异常告警 27 // 状态非20000, 接口是正常返回,但数据不是正常所期望的数据(属于后端定义的异常) 28 Message({ 29 type: "error", 30 message: "[异常]响应拦截器返回信息:接口请求异常,请联系管理员 " + response.request.responseURL + " 状态码:" + res.code 31 }) 32 return Promise.reject("[异常]响应拦截器返回信息:接口请求异常,请联系管理员") 33 } 34 } else { 35 // 状态20000,返回后端的[data]数据部分 36 return Promise.resolve(res.data) 37 } 38 }, 39 error => { 40 // http请求返回状态非200 41 42 // 页面消息提示 43 Message({type: "error", message: "[错误]响应拦截器返回信息:接口请求错误,请联系管理员" + error.response.request.responseURL}) 44 45 // 控制台里输出请求的url和返回的状态码 46 console.log("[错误]响应拦截器返回信息:") 47 console.log("URL:", error.response.request.responseURL, "; 状态码:", error.response.request.status) 48 49 // 设置异步请求状态为失败 50 Promise.reject("[错误]响应拦截器返回信息:接口请求错误,请联系管理员") 51 } 52 )
B函数: 通过封装的axios去调用后端一接口
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 export function api_function() { 2 return new Promise((resolve, reject) => { 3 request({url: '/api/function', method: 'get'}).then(res => { 4 resolve(res) 5 }).catch(err => { 6 reject(err) 7 }) 8 }) 9 }
C函数:vue文件里调用B函数的方法
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 created: async function () { 2 await api_funs().then(res => { 3 this.sections = res 4 }).catch(err => { 5 this.$message({message: err}) 6 }) 7 }
调用关系是C --> B --> A
A这里有Promise.reject(error),B C函数中.catch(err => {})获取到err错误,就是A中 `Promise.reject(error)` 返回的错误。所以,不是因为特殊原因(就算接口数据异常,也要返回失败的数据),B C中的catch部门可以省略。