小程序开发中报错：Uncaught (in promise)
小程序开发过程出现Uncaught (in promise)的问题要怎么解决啊，我的所有请求好像都会报错，但是网络请求状态码都是成功的
相关代码
首页代码 index.js
<template>
<view class="content">
<view class="">
<u-swiper :list="slides" name="img_url" height="320"></u-swiper>
</view>
<view class="u-text-center u-m-t-30">
<u-tabs :list="sortList" :current="currentSort" @change="changeSort" bar-width="100" item-width="160">
</u-tabs>
</view>
<!-- 商品展示 -->
<u-row gutter="16">
<!-- 单个商品分区区域 -->
<u-col span="6" v-for="item in goods">
<!-- 商品介绍 -->
<navigator class="goods-item">
<u-image width="100%" height="300rpx" :src="item.cover_url"></u-image>
<view class="title u-m-t-20 u-line-1">{{item.title}}</view>
<view class="u-flex u-row-between">
<view class="price">¥ {{item.price}}</view>
<view class="sales">销量:{{item.sales}}</view>
</view>
</navigator>
</u-col>
</u-row>
</view>
</template>
<script>
export default {
data() {
return {
sortList: [{
name: '默认'
},
{
name: '销量'
},
{
name: '推荐'
},
{
name: '最新'
}
],
currentSort: 0,
slides: [],
goods: [],
page:1
}
},
async onLoad() {
this.getData()
// const loginData = {email:'test@a.com',password:'123123'}
// const login = await this.$u.api.authLogin(loginData)
// console.log(login)
},
// try{
// const res = await this.$u.api.index()
// this.slides = res.slides
// this.goods = res.goods.data
// }catch(err){console.log('error',error)}
methods: {
changeSort(index) {
this.currentSort = index;
console.log(index)
},
// 生命周期函数写在methods外面，自定义函数写在methods中
async getData(){
const params = {
page: this.page
}
const res = await this.$u.api.index()
console.log(res)
this.slides = res.slides
// 原有的数据 加上上拉加载后的数据 等于goods数组
this.goods = [...this.goods,...res.goods.data]
}
},
// 上拉触底加载
onReachBottom(){
// 重新加载，带上分页
this.page = this.page + 1
this.getData()
}
}
</script>
<style lang="scss" scoped>
.goods-item {
padding: 40rpx;
box-shadow: 0 12rpx 20rpx 0 rgba(0, 0, 0, .1);
margin-top: 30rpx;
.title {
font-size: 32rpx;
font-weight: 500;
margin: 10rpx 0;
}
.price {
color: red;
}
.sales {
color: #888;
}
}
</style>
API集中管理 http.api.js
const install = (Vue, vm) => {
// 定义api属性
vm.$u.api = {}
// let index = (params = {}) => vm.$u.get(indexUrl, params)
// 首页
vm.$u.api.index = (params) => vm.$u.get('/api/index', params)
// 认证相关的 登陆
vm.$u.api.authLogin = (params) => vm.$u.post('/api/auth/login', params)
// 将各个定义的接口名称，统一放进对象挂载到vm.$u.api(因为vm就是this，也即this.$u.api)下
// 每定义一个接口名称就需要挂载一次，为了方便也可以将let index改成 vm.$u.api.index
// vm.$u.api = {
// index,
// authLigin
// };
}
export default {
install
}
http的请求 http.interceptor.js
// 这里的vm，就是我们在vue文件里面的this，所以我们能在这里获取vuex的变量，比如存放在里面的token变量
const install = (Vue, vm) => {
// 此为自定义配置参数，具体参数见上方说明
Vue.prototype.$u.http.setConfig({
baseUrl: 'https://api.shop.eduwork.cn', // 请求的本域名
method: 'POST',
// 设置为json，返回后会对数据进行一次JSON.parse()
dataType: 'json',
showLoading: true, // 是否显示请求中的loading
loadingText: '请求中...', // 请求loading中的文字提示
loadingTime: 800, // 在此时间内，请求还没回来的话，就显示加载中动画，单位ms
originalData: false, // 是否在拦截器中返回服务端的原始数据 这取决于api是否依赖原始数据
loadingMask: true, // 展示loading的时候，是否给一个透明的蒙层，防止触摸穿透
// 配置请求头信息
header: {
'content-type': 'application/json;charset=UTF-8'
},
});
// 请求拦截，配置Token等参数
Vue.prototype.$u.http.interceptor.request = (config) => {
config.header.Authorization = "Bearer" +
"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwczpcL1wvYXBpLnNob3AuZWR1d29yay5jblwvYXBpXC9hdXRoXC9sb2dpbiIsImlhdCI6MTY0MTYyMjk2MSwiZXhwIjoxNjQxOTgyOTYxLCJuYmYiOjE2NDE2MjI5NjEsImp0aSI6InA2N3ozM0p2eVhlTmprNjAiLCJzdWIiOjIsInBydiI6IjIzYmQ1Yzg5NDlmNjAwYWRiMzllNzAxYzQwMDg3MmRiN2E1OTc2ZjcifQ.44gQ--9yfXqsqNq5X13AqYYdS2Fi6BIWqctV7bldrJQ"
// 最后需要将config进行return
return config;
// 响应拦截，判断状态码是否通过
Vue.prototype.$u.http.interceptor.response = (res) => {
// 解构状态码 和 data
const {
statusCode,
data
} = res
// 返回数据中没有code
if (statusCode < 400) {
// res为服务端返回值，可能有code，result等字段
// 这里对res.result进行返回，将会在this.$u.post(url).then(res => {})的then回调中的res的到
// 如果配置了originalData为true，请留意这里的返回值
return data;
} else if (statusCode == 400) {
// 错误的请求
// console.log(res)
// 弹窗的方式 ？？？请求错误状态码400未弹窗
vm.$u.toast(data.message)
return false;
} else if (statusCode == 401) {
vm.$u.toast('验证失败，请重新登录');
setTimeout(() => {
// 此为uView的方法，详见路由相关文档
vm.$u.route('/pages/user/login')
}, 1500)
return false;
} else if (statusCode == 422) {
// 表单验证未通过 需要给用户返回的错误提示在errors中
const {
errors
} = data
console.log(Object.values(errors)[0][0])
vm.$u.toast(Object.values(errors)[0][0]);
return false;
} else {
// 如果返回false，则会调用Promise的reject回调，
// 并将进入this.$u.post(url).then().catch(res=>{})的catch回调中，res为服务端的返回值
return false;
}
}
// 增加patch请求
vm.$u.patch = (url, params = {}, header = {}) => {
// 模拟patch请求 因为get不支持patch
const _params = {
...params,
_method: 'PATCH'
}
return vm.$u.get(url, _params, header)
}
}
export default {
install
}
运行结果及报错内容
在首页 index.js的文件中通过const res = await this.$u.api.index()无法获取到对应的数据，也无法打印console.log(res)，然后报错结果如下（ps 我也不知道那个li是哪里来的）：
麻烦有小伙伴能够指点一二，感激（抱拳）
你的接口我用postman试了一下，都没有返回statusCode。然后你拦截器里面解构赋值是undefined的。所以直接reject是false；另外说一下，那个li是你自己写到控制台的。^_^
响应拦截处打印res看看
看看这个