фон
При использовании Apifox для запроса интерфейса с картинками, я хочу отображать картинки, пока запрос успешен.В это время я начал искать официальные документы на Baidu. Наконец выяснилось, что картинки в ответе можно вывести с помощью постскриптума.
план
Как показано на рисунке ниже, после успешного запроса интерфейса возвращается структура JSON:
{
"images":[],
"parameters":{
},
"info":""
}
1. Добавьте постскриптум
На данный момент я хочу видеть изображения в изображениях после успешного запроса, так как мне это сделать?
Ответ — использовать [пользовательский постскриптум]. В инструменте apxfox найдите [Пост-операция] -> [Добавить пост-операцию] -> [Пользовательский скрипт].
2. Добавьте код чтения
Вставьте следующий код в инструмент, параметры подробно описаны ниже:
//pm是apifox的内置对象，通过这个对象，可以获取到请求结果（response）
//通过.json()函数，获取到响应体中返回的json数据
let res = pm.response.json()
//定义一个模板，这个模板存的是
const template = `<html><img src="{
{imgTemplate}}" /></html>`;
//构建img标签能识别的base64 url，注：如果接口返回的base64 url没有【data:image/png;base64,】则需要拼接进去，否则出不来图片。
//因接口返回的是一个数组，这里打印打一张图片
let img= "data:image/png;base64,"+ res.images[0];
//console.log(img) //打印
// 设置 visualizer 数据。
//template：模板，上面const定义的template。
// {imgTemplate: img}，imgTemplate对应的是template中src的值；img指的是上述定义的img base64 url
pm.visualizer.set(template, {
imgTemplate: img
})
3. Эффект операции
После успешного запроса интерфейса нажмите [Визуализировать], чтобы увидеть успешно отображаемое изображение.
