请求数据:使用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,
}
}
}