Vue3 Typescript 怎么把 axios post 返回数据取出来，请教

怎么把 postMethod（）函数的返回 数据取出来，
这是Typescript 不是 JS !

// 封装的 axios 方法
import axios from 'axios'
  export function postMethod (url:string, params:object): any{
    axios.post(url, params).then(
      function (response) {
        alert(`成功POST,${response}`)
        console.log('成功连接',response)  // 这里正常运行，可以打印出返回的数据 code， token 等
      }
    ).catch(function (error) { alert(`${error}`)})
  }

// login.vue 组件 中调用，出错！ 哪位帮改写一下，多谢

function loginSubmit () {
  // postMethod 函数 ,实际已经拿到数据(上面的代码中可以打印出来), 问题在这里 我怎么拿出来
  // 以前js下面这行写可以拿到数据,  现在改成 ts 这里报错，
  const { data: res } = postMethod('login/', { username: loginData.username, password: loginData.password }) 
  
  console.log('收至的res',res) // 代码进行不到这

  if (res.code === 1001) { return alert('用户名或密码错误') }
  if (res.token && res.code === 1000) {
    window.sessionStorage.setItem('token', res.token)
    router.push('/home')
  } else { alert('登录出错') }
}
提示：
  菜 niao 一枚目前提问近百了，
  但是有些回答....., 也都采纳过题。
  菜niao  最需要的是代码改写。
  有效的改写，追加一份当前悬赏。 
  感谢！

改动的已经在注释后增加--区别 //--
请求是异步的需要改成async await 或then 请求方法需要增加return

// 封装的 axios 方法
import axios from 'axios'
  export function postMethod (url:string, params:object): any{
  // --增加return
return axios.post(url, params).then(
      function (response) {
        alert(`成功POST,${response}`)
        console.log('成功连接',response)  // 这里正常运行，可以打印出返回的数据 code， token 等

            //--如果想方法中增加then 需要return需要返回的数据 增加return
          return response;

      }
    ).catch(function (error) { alert(`${error}`)})
  }
 
// login.vue 组件 中调用，出错！ 哪位帮改写一下，多谢
 
function loginSubmit () {
  // postMethod 函数 ,实际已经拿到数据(上面的代码中可以打印出来), 问题在这里 我怎么拿出来
  // 以前js下面这行写可以拿到数据,  现在改成 ts 这里报错，

// --请求为异步请求 需要async await 或then处理
postMethod('login/', { username: loginData.username, password: loginData.password }) .then(res=>{
  console.log(res);
console.log('收至的res',res) // 代码进行不到这
  if (res.code === 1001) { return alert('用户名或密码错误') }
  if (res.token && res.code === 1000) {
    window.sessionStorage.setItem('token', res.token)
    router.push('/home')
  } else { alert('登录出错') }
})
 // const { data: res } = postMethod('login/', { username: loginData.username, password: loginData.password }) 
  }
  
 

postMethod 函数里把response return出来时=是什么效果

return response

postMethod函数里，你return response.data不行么，别的地方调用这个方法

可以将promise返回，然后去的response。

import axios from 'axios';

type Params = {
    username: string;
    password: string;
}
export function postMethod(url: string, params: Params): any {
    return axios
        .post(url, params)
}

// login.vue 组件 中调用，出错！ 哪位帮改写一下，多谢

async function loginSubmit() {
    // postMethod 函数 ,实际已经拿到数据(上面的代码中可以打印出来), 问题在这里 我怎么拿出来
    // 以前js下面这行写可以拿到数据,  现在改成 ts 这里报错，
    const { data: res } = await postMethod('login/', {
        username: loginData.username,
        password: loginData.password,
    });

    console.log('收至的res', res); // 代码进行不到这

    if (res.code === 1001) {
        return alert('用户名或密码错误');
   ; }
    if (res.token && res.code === 1000) {
        window.sessionStorage.setItem('token', res.token);
        router.push('/home');
    } else {
        alert('登录出错');
   }
}

export function postMethod (url:string, params:object): any{
                return new Promise(resolve=>{
                    axios.post(url, params).then(
                      function (response) {
                        resolve(response)
                        
                        alert(`成功POST,${response}`)
                        console.log('成功连接',response)  // 这里正常运行，可以打印出返回的数据 code， token 等
                      }
                    ).catch(function (error) { alert(`${error}`)})
                })
              }

// 方法一
// 封装的 axios 方法
 
export function postMethod(url: string, params: object, callback: Function): any {
    return axios.post(url, params)
}
 
/ login.vue 组件 中调用，出错！ 哪位帮改写一下，多谢
 
async  function loginSubmit() {
    // postMethod 函数 ,实际已经拿到数据(上面的代码中可以打印出来), 问题在这里 我怎么拿出来
    // 以前js下面这行写可以拿到数据,  现在改成 ts 这里报错，
    const  res = await postMethod('login/', { username: loginData.username, password: loginData.password })
 
   console.log(res,'===res')
 
    
}
 
 
 
//方法二
 
export function postMethod(url: string, params: object,callback:Function): any {
            axios.post(url, params).then(
                function (response) {
                    console.log('成功连接', response)   
                    callback(response)
 }
            ).catch(function (error) { alert(`${error}`) })
        }
 
 
 
function loginSubmit() {
            // postMethod 函数 ,实际已经拿到数据(上面的代码中可以打印出来), 问题在这里 我怎么拿出来
            // 以前js下面这行写可以拿到数据,  现在改成 ts 这里报错，
             postMethod('login/', { username: loginData.username, password: loginData.password },callback(res:any=>{
                 console.log(res)
      
 
             }))
 
            
        }

import axios from 'axios'

export function postMethod(url: string, params: object): any {
    return axios.post(url, params)
    // axios.post 本身就是异步的，所以直接return，在调用的时候使用async await 或者.then.catch
}

const loginData = {
    username: 'admin',
    password: '123456'
}

// 方式1 async await
async function loginSubmit() {
    // async https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/async_function
    const res = await postMethod('login/', { username: loginData.username, password: loginData.password }) 
    // await 将异步请求变为同步执行
    // res 就是在你原先代码中 response 或者失败的情况下是 error
    console.log(res,'===res') 
}

// 方式2 .then.catch
async function loginSubmitType2() {
    postMethod('login/', { username: loginData.username, password: loginData.password })
    .then((response: any) => {
        console.log(response,'===res') 
    })
    .catch((error: any) => {
        console.log(error,'===err')
    })
}