Javascript Vue SPA检索嵌套承诺中错误代码（不是200）的状态代码

在我的VUE组件中，我使用此异步方法从API获取数据：

组件：

方法：{
异步获取（）{
//console.log（“#############”等）；
const{data}=await staffRepository.getItems（this.teamId）
//console.log（“结束等待”）；
this.staff=数据
},
},

正如您所看到的，我使用一个自定义存储库来拥有一个axios代码，这个存储库是在我以前的组件中导入的

员工资源库：

导出默认值{
getItems（nationId）{
返回Repository.get（`page/${nationId}`）
},
}

最后是具有axios代码的主存储库：

存储库：

从“axios/index”导入axios
常数baseDomain=https://my 终点'
常量baseURL=`${baseDomain}`
...
常量头={
“X-CSRF-TOKEN”：令牌，
//“Access Control Allow Origin”：“*”，//如果添加它，请将“allowedHeaders”添加到ai服务器config/cors.php
“X-request-With'：“XMLHttpRequest”，
“内容类型”：“应用程序/json”，
授权：`Bearer${jwtoken}`，
}
导出默认的axios.create({
baseURL，
withCredentials:withCredentials，
标题：标题，
})

当jwtoken是有效的而不是EXIPRED令牌时，该代码工作得非常好

问题是当令牌过期或未找到时，my laravel 5.8 API返回状态代码401（或其他）

获取401（未经授权）

一个好的解决方案可以捕获staffRepository中的状态代码，即具有get方法的状态代码

MySolution：（不工作）

getItems（nationId）{
返回Repository.get（`page/${nationId}`）
。然后（响应=>{
console.log（响应）
})
.catch（错误=>{
console.log（error.response.status）//我建议在组件中使用返回的承诺，以使事情更加明确：

方法：{
fetch（）{
让数据=null
员工资源库
.getItems（此.teamId）
。然后（数据=>{
//处理数据
this.staff=数据
})
.catch（e=>{
//做一些有错误的事情，或者告诉用户
})
},
},

编辑-这将非常好地工作，因为如果您使用axios，存储库中的方法将默认返回承诺

试试这个：API代码，其中HTTP是axios实例

export const get=（路径：string）：Promise=>{
返回新承诺（（解决、拒绝）=>{
HTTP.get（`${path}`）
。然后（（响应）=>{
决心（回应）；
})
.catch（（错误）=>{
拒绝（handleError（error））；
});
});
};
//******处理错误*****/
导出函数句柄错误（错误）{
if（error.response）{
const status=error.response.status；
开关（状态）{
案例400：
//做点什么
打破
案例401：
//做点什么，也许注销用户
打破
案例403：
打破
案例500：
//服务器错误。。。
打破
违约：
//在这里处理正常错误
}
}
return error；//返回错误消息，或返回组件/vue文件所需的任何内容
}
我建议在组件中使用返回的承诺，使事情更加明确：

方法：{
fetch（）{
让数据=null
员工资源库
.getItems（此.teamId）
。然后（数据=>{
//处理数据
this.staff=数据
})
.catch（e=>{
//做一些有错误的事情，或者告诉用户
})
},
},

编辑-这将非常好地工作，因为如果您使用axios，存储库中的方法将默认返回承诺

试试这个：API代码，其中HTTP是axios实例

export const get=（路径：string）：Promise=>{
返回新承诺（（解决、拒绝）=>{
HTTP.get（`${path}`）
。然后（（响应）=>{
决心（回应）；
})
.catch（（错误）=>{
拒绝（handleError（error））；
});
});
};
//******处理错误*****/
导出函数句柄错误（错误）{
if（error.response）{
const status=error.response.status；
开关（状态）{
案例400：
//做点什么
打破
案例401：
//做点什么，也许注销用户
打破
案例403：
打破
案例500：
//服务器错误。。。
打破
违约：
//在这里处理正常错误
}
}
return error；//返回错误消息，或返回组件/vue文件所需的任何内容
}
最佳实践解决方案是使用axios的拦截器：

从“axios”导入axios；
从“js cookie”导入cookie；
导出默认值（选项={}）=>{
让client=options.client | | axios.create（{baseURL:process.env.baseURL}）；
让token=options.token | | Cookies.get（“token”）；
让refreshToken=options.refreshToken | | Cookies.get（“refreshToken”）；
让refreshRequest=null；
client.interceptors.request.use(
配置=>{
如果（！令牌）{
返回配置；
}
常量newConfig={
标题：{}，
…配置
};
newConfig.headers.Authorization=`Bearer${token}`；
返回newConfig；
},
e=>承诺.拒绝（e）
);
client.interceptors.response.use(
r=>r，
异步错误=>{
如果(
！刷新令牌||
error.response.status！==401||
error.config.retry
) {
投掷误差；
}
如果（！刷新请求）{
refreshRequest=client.post（“/auth/refresh”{
刷新令牌
});
}
const{data}=等待刷新请求；
const{token:_token，refreshttoken:_refreshttoken}=data.content；
令牌=_令牌；
Cookies.set（“令牌”，令牌）；
refreshRequest=\u refreshToken；
Cookies.set（“refreshToken”，\u refreshToken）；
const newRequest={
import api from './api'

async function me() {
  try {
    const res = await api().get('/auth/me')
    // api().post('/auth/login', body) <--- POST

    if (res.status === 200) { alert('success') }
  } catch(e) {
    // do whatever you want with the error
  }
}