Vue3项目，axios封装接口api，请求 + 获取数据出错

请求数据：使用axios发送请求时携带参数，假如参数传入为对象则请求出错，传入为字符串（例如：变量=数值）才能请求成功

获取数据：返回数据为promise时，获取[[PromiseResult]]里面的数据

封装接口

api目录下建立http.js和apiUrl.js，这两个文件发起请求必备的

http.js：用于创建axios实例，便于统一管理请求对象

apiUrl.js：项目所有接口都放在这里

api目录结构：

 

 

组件的请求过程封装成*API.js文件统一放在api文件夹下

这样的做法便于管理接口，修改接口地址改apiUrl.js，修改请求过程修改*API.js

http.js

import axios from "axios"
​
export default axios.create({
    // 服务接口基本地址
    baseURL: 'http://localhost:9000',
    // 超时时间
    timeout: 1500,
    // 超时错误信息
    timeoutErrorMessage: '请求超时'
})

apiUrl.js

// 所有接口配置，便于后期管理
​

export default {
    getAllLogin: '/getAllLogin.ac',
    
    
    ...
}

请求数据（解决传参问题）

//qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库
import qs from "qs"
​
//axios请求数据，直接传入对象不会自动转换类型
//使用qs库的这个方法可以把对象方法解析解析成字符串再传递给axios
qs.parse()是将URL解析成对象的形式
qs.stringify()是将对象序列化成URL的形式，以&进行拼接
​
​
例如：
let msg = {
    username: "test",
    password: "000000"
}
qs.stringify(msg)
​
最终结果被解析为 ==>   username=test&password=000000

获取数据（解决从封装api方法 获取 服务端响应的数据）

核心代码

==封装api方法（``*API.js``） —— 返回响应数据给组件==

response => {
    // 返回服务端响应数据给组件
    return response.data
}

==组件setup（），调用封装api方法==

//调用封装api后，需要调用then()，在里面获取返回值
//==============这个获取到的才是服务端响应的数据===============
getMiniInfoCard(apiUrl.getInfoByUserNameUrl,data).then(
    (response)=> {
        miniInfoCards.value = response.data
    }
);



//假如直接调用api获取数据得到的是一个promise对象
getMiniInfoCard(apiUrl.getInfoByUserNameUrl,data)

*API.js

import http from "./http"
import {ElMessage} from "element-plus"
​
//qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库
import qs from "qs"
​
// 获取数据：miniInfoCard
const getMiniInfoCard = (url,data)=> {
    return http.post(url,qs.stringify(data)).then(
        response => {
            return response.data
        },
        error => {
            ElMessage({
                type: "error",
                message: error.message,
                showClose: true
            })
        }
    )
}
​
export default getMiniInfoCard

组件

export default {
    setup() {
        let miniInfoCards = ref([])
​
        let data = {
            username: 'admin'
        }
​
        // 获取数据: miniInfoCard
        getMiniInfoCard(apiUrl.getInfoByUserNameUrl,data).then(
            (response)=> {
                miniInfoCards.value = response.data
            }
        );
​
        return {
            miniInfoCards,
        }
    }
}