关于promise的多层调用

Posted 2020-12-14 wangsl1204

A函数： axios的拦截器封装

 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 )

request.js

 

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

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 }

fun.js

 

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

1 created: async function () {
2             await api_funs().then(res => {
3                 this.sections = res
4             }).catch(err => {
5                 this.$message({message: err})
6             })
7         }

ceshi.vue

 

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

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