前言
请求工具栏，前端最常用的就是axios，下面基于这个axios进行一个封装
安装
npm i axios
配置
（这部分提前和大家说下，写的必定存在一些问题。因为我是先写接口，再去写组件。
并不是所有接口方法都进行了测试，而且是生产环境，也不好乱发请求，所以也不知道具体会返回什么数据，
部分接口的参数有点模糊，比如 发表动态 这个接口，文档中一开始是3个参数，后面又变成4个参数，存在很多不确定性，需要到时候使用接口时才能纠正，大家可以边写边改
如果大家发现了问题欢迎留言，使用过程中我发现问题也会及时回来改。
另一个是，接口方法我没有全写完，因为太多了，我是边用边写，下面这部分只是给大家做个示例
）
在src下创建api目录，目录下创建
ajax.js
import axios from "axios";
let BASE_URL='https://api.sunofbeach.net' //阳光沙滩api接口地址
export default function ajax(url, data = {mock:false}, type = "GET") {
return new Promise(function (resolve, reject) {
switch (type) {
case "GET":
axios.get(BASE_URL+url, {
params: data
}).then(function (response) {
resolve(response.data)
}).catch(function (error) {
reject(error)
});
break;
case "POST":
axios.post(BASE_URL+url, data)
.then(function (response) {
resolve(response.data)
})
.catch(function (error) {
reject(error)
});
break;
case "PUT":
axios.put(BASE_URL+url, data ).then(function (response) {
resolve(response.data)
}).catch(function (error) {
reject(error)
})
break
case "DELETE":
axios.delete(BASE_URL+url, {
params: data
}).then(function (response) {
resolve(response.data)
}).catch(function (error) {
reject(error)
});
break;
default:
reject('请求类型错误')
}
})
}
/*
该文件封装了各个请求，调用接口时无需手动输入路径，直接调用此api的方法即可
接口地址参考 https://www.sunofbeach.net/a/1403262826952323074
*/
import ajax from "./ajax";
import md5 from 'blueimp-md5'
/**
* 用户登录
* @param phoneNum 手机号
* @param password 密码，md5加密
* @param captcha 验证码
*/
function login(phoneNum, password, captcha) {
//这里需要引入md5加密
// 安装 npm install blueimp-md5
// 引入
let md5Password = md5(password)
return ajax(`/uc/user/login/${captcha}`, {
phoneNum,
password: md5Password
}, 'POST')
}
/**
* 根据手机号获取用户头像
* @param phoneNum
* @returns {Promise<unknown>}
*/
function getAvatarByPhone(phoneNum) {
return ajax(`/uc/user/avatar/${phoneNum}`)
}
/**
* 退出登录
*/
function logout() {
return ajax(`/uc/user/logout`)
}
/**
* 解析token，返回用户信息
* 需要携带cookie
*/
function checkToken() {
return ajax(`/uc/user/checkToken`)
}
/**
* 手机注册时获得短信验证码
* @param phoneNumber
* @param verifyCode
* @returns {Promise<unknown>}
*/
function getSmsForRegister(phoneNumber, verifyCode) {
return ajax(`/uc/ut/forget/send-sms`, {
phoneNumber,
verifyCode
}, 'POST')
}
/**
* 校验短信验证码是否正确
* @param phoneNumber
* @param smsCode
* @returns {Promise<unknown>}
*/
function checkSmsCode(phoneNumber, smsCode) {
return ajax(`/uc/ut/check-sms-code/${phoneNumber}/${smsCode}`)
}
/**
* 用户注册
* @param smsCode
* @param phoneNum
* @param password
* @param nickname
* @returns {Promise<unknown>}
*/
function register(smsCode,
{
phoneNum,
password,
nickname
}) {
return ajax(`/uc/user/register/${smsCode}`, {
phoneNum,
password,
nickname
}, 'POST')
}
/**
* 通过短信验证码修改密码
* @param smsCode
* @param phoneNum
* @param password
*/
function updatePasswordBySms(smsCode, phoneNum, password) {
return ajax(`/uc/user/forget/${smsCode}`, {
phoneNum,
password
}, "PUT")
}
/**
* 根据旧密码修改密码
* @param oldPwd
* @param newPwd
* @param captcha
*/
function updatePassword({
oldPwd,
newPwd,
captcha
}) {
return ajax(`/uc/user/modify-pwd`, {
oldPwd,
newPwd,
captcha
}, "PUT")
}
/**
* 获取动态列表
* @param topicId 话题Id，其中推荐为recommend，获取关注的为 follow 其他的则是话题的id
* @param page
*/
function getMoyuList(topicId, page) {
return ajax(`/ct/moyu/list/${topicId}/${page}`)
}
/**
* 获取热门动态列表
* @param size 数量
*/
function getHotMoyuList(size) {
return ajax(`/ct/moyu/hot/${size}`)
}
/**
* 获得动态的评论
* @param momentId
* @param page
* @param sort
* @returns {Promise<unknown>}
*/
function getComment(momentId, page, sort) {
return ajax(`/ct/moyu/comment/${momentId}/${page}?sort=${sort}`)
}
/**
* 给动态点赞
* @param momentId
*/
function thumbUp(momentId) {
return ajax(`/ct/moyu/thumb-up/${momentId}`, null,"PUT")
}
/**
* 给某个动态评论
* @param momentId
* @param content
*/
function comment({
momentId,
content
}) {
return ajax(`/ct/moyu/comment`, {
momentId,
content
}, 'POST')
}
/**
* 回复评论
* @param content
* @param momentId
* @param targetUserId
* @param commentId
* @returns {Promise<unknown>}
*/
function subComment({
content,
momentId,
targetUserId,
commentId
}) {
return ajax(`/ct/moyu/sub-comment`, {
content,
momentId,
targetUserId,
commentId
}, 'POST')
}
/**
* 发表动态
* @param content
* @param topicId
* @param images
* @returns {Promise<unknown>}
*/
function publishMoyu({
content,
topicId,
images
}) {
return ajax(`/ct/moyu`, {
content,
topicId,
images
}, 'POST')
}
/**
* 获取单条动态详情
* @param momentId
* @returns {Promise<unknown>}
*/
function getMoyuDetail(momentId) {
return ajax(`/ct/moyu/${momentId}`)
}
/**
* 获取首页摸鱼话题
* @returns {Promise<unknown>}
*/
function getMoyuTopic() {
return ajax(`/ct/moyu/topic/index`)
}
/**
* 获得话题列表
* @returns {Promise<unknown>}
*/
function getMoyuTopicList() {
return ajax(`/ct/moyu/topic`)
}
/**
* 关注话题
* @param id
* @returns {Promise<unknown>}
*/
function followTopic(id) {
return ajax(`/ct/moyu/topic/follow/${id}`, null,'POST')
}
/**
* 取消关注话题
* @param id
* @returns {Promise<unknown>}
*/
function unfollwTopic(id) {
return ajax(`/ct/moyu/topic/follow/${id}`, null, 'DELETE')
}
/**
* 获取关注的话题列表
* @returns {Promise<unknown>}
*/
function getFollwTopicList() {
return ajax(`/ct/moyu/topic/follow`)
}
export default {
login,
getAvatarByPhone,
logout,
checkToken,
getSmsForRegister,
checkSmsCode,
register,
updatePasswordBySms,
updatePassword,
getMoyuList,
getHotMoyuList,
getComment,
thumbUp,
comment,
subComment,
publishMoyu,
getMoyuDetail,
getMoyuTopic,
getMoyuTopicList,
followTopic,
unfollwTopic,
getFollwTopicList
}
使用方法
在组件中调用接口数据时，参考我以下示例
import api from './api' //引入api，这个路径由你当前所处的组件决定
export default {
name: "App",
methods: {
// 因为api方法返回的是promise，所以需要加上 async await来等待数据返回
async getMoyuTopic() {
let moyuTopicRes = await api.getMoyuTopic()
console.log(moyuTopicRes)
}
}
}
