wordpress评论邮箱通知功能/免费seo教程分享

请求数据：使用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'}
​// 获取数据: miniInfoCardgetMiniInfoCard(apiUrl.getInfoByUserNameUrl,data).then((response)=> {miniInfoCards.value = response.data});
​return {miniInfoCards,}}
}