Vue用async和await处理axios请求 有请求并返回响应数据 控制台console输出是undefined???

我是因为没有返回promise,没有.then处理,所以有请求有响应,控制台console是undefined,下面是我改进的代码。

封装axios拦截

//封装axios拦截器
import axios from 'axios'
import Vue from 'vue'
import { Promise } from 'core-js'
let vue= new Vue()
axios.defaults.baseURL="这个是baseURL"
axios.defaults.timeout=2000
let instance=axios.create()

//请求拦截器 在请求接口之前
instance.interceptors.request.use(function(config){
    //拦截之前的业务逻辑
    //token
    let xxx=JSON.parse(sessionStorage.getItem("token"))
    if(xxx){
        config.headers["token"]=xxx.token
    }
    return config
},function(err){
    return Promise.reject(err)
})
//响应拦截
instance.interceptors.response.use(function(res){
    return res
},function(err){
    console.log(err.response)
    switch(err.response.status){
        case 401:
            vue.$alert('请设置token', '错误提示', {
                confirmButtonText: '确定',
              });
            break;
        case 403:
            vue.$alert('token失效', '错误提示', {
                confirmButtonText: '确定',
                callback: action => {
                    sessionStorage.removeItem("memeber")
                    location.href="/login"
              }
              })
            break;
        case 404:
            vue.$alert('页面未找到', '错误提示', {
                confirmButtonText: '确定',
                callback: action => {
                    sessionStorage.removeItem("memeber")
                    location.href="/home"
              }
              })
            break;
        case 500:
                vue.$alert('服务器出错了', '错误提示', {
                    confirmButtonText: '确定',
                  })
                break;
    }
})

export{
    instance
}

封装接口

import {instance} from '../utils/request'
//获取列表
function getDataList(page,pageSize){
    return new Promise((resolve,reject)=>{
        instance.get('/xxxx',{
            params:{
            //分页
                page:page,
                pageSize:pageSize
            }
        }).then((res)=>{
            resolve(res)
        },(err)=>{
            reject(err)
        })
    })
}
export{
    getDataList
}

async和await处理返回的数据

created:{
this.getData(1)
},
methods: {
async getData(pages){
       let that = this;
       try {
          let result=await getDataList(pages,10)
          console.log('result',result)
       } catch (error) {
         console.log(error)
       }
    }
  }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值