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)
       }
    }
  }

最后

以上就是优雅钢笔为你收集整理的Vue用async和await处理axios请求 有请求并返回响应数据 控制台console输出是undefined？？？的全部内容，希望文章能够帮你解决Vue用async和await处理axios请求 有请求并返回响应数据 控制台console输出是undefined？？？所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。