Сообщение axios, чтобы узнать, действительны ли данные
Хорошо, я в конце своего дня, и я не могу ясно мыслить. Так вот что у меня...
контроллер Laravel, отправьте ему имя пользователя, и он сообщит мне, доступно ли имя пользователя, а если нет, выдаст мне код 422.
public function checkUsername(Request $request) {
Validator::make($request->all(), [
'name' => ['required', 'string', 'max:255', 'unique:users'],
])->validate();
return response()->json([
'valid' => true,
'data' => [
'message' => 'Username is available!'
]
], 200);
}
Пример правильного ответа:
{"valid":true,"data":{"message":"Username is available!"}}%
Завиток для тестирования:
curl -X POST -H "Content-Type: application/json" -d '{"name": "bossryan"}' http://127.0.0.1:8000/api/checkusername
Далее: у меня есть внешний интерфейс Vue, использующий Vee-validate. Он делает кучу вещей, но мне нужно добавить эту последнюю проверку в смесь, поэтому, если имя пользователя занято (я не получаю правильный ответ сверху, он должен ответить «Это имя пользователя уже занято»
validateUsername(value) {
// if the field is empty
if (!value) {
return 'This field is required';
}
const regex = /^[a-zA-Z0-9_.+-]{4,20}$/i;
if (!regex.test(value)) {
return 'This must be a minimum of 4 characters';
}
return true;
},
Это аксиомы, которые я создал, но они не работают:
const isUnique = (value) => {
return axios.post('/api/checkusername', { email: value }).then((response) => {
// Notice that we return an object containing both a valid property and a data property.
return {
valid: response.data.valid,
data: {
message: response.data.message
}
};
});
};
Я знаю, что мне нужно добавить аксиомы, но у меня просто чертовски много времени на настройку, и мой разум продолжает метаться. Я просто ищу кого-то, кто может просто помочь мне подключить запрос axios выше // Все хорошо, так что я могу закончить это.
СПАСИБО ЗА ПОМОЩЬ СООБЩЕСТВУ!
Ответы 1
Vee-validate, похоже, хочет получить решенное обещание для асинхронной проверки. Axios отклонит обещание, если статус >= 400, поэтому вам нужно обработать это соответствующим образом.
Предполагая, что в случае сбоя проверки тело ответа соответствует тому же формату { valid, data: { message } }, вам нужно что-то вроде следующего
const isUnique = (name) =>
axios.post("/api/checkusername", { name })
.then(({ data }) => data)
.catch(err => ({ // resolve with error details
valid: err.response?.data?.valid ?? false,
data: {
// get the message from the response if it exists
message: err.response?.data?.data?.message ?? "Validation failed"
}
}));
export default {
methods: {
async validateUsername(value) {
// do your synchronous checks as per question
const check = await isUnique(value);
return check.valid || check.data.message;
}
}
}
Это предоставит общее сообщение "Проверка не удалась", если тело ответа 422 не соответствует ожиданиям.
Спасибо, Фил. Это то, чего мне не хватало, так это асинхронной части. Мне нужно немного почистить его, потому что я хочу ограничить запрос onBlur (но это легко), это, по крайней мере, дало мне то, что я искал !!!
На панели инструментов разработчика Сеть вы должны увидеть запрос POST, отправляемый на
/api/checkusername, верно? Вы также должны увидеть, что статус ответа — 422. Вы хотите сказать, что если вы нажмете на этот запрос и откроете вкладку Ответ, она будет полностью пустой?