vue3实现类postman 接口测试功能

效果：

功能描述：

主要实现form-data、x-www-form-urlencoded、raw以及单独上传文件功能、可单独配置请求头

获取测试结果并下载为json格式文件

raw代码编辑器：选择monaco

html

<template>
  <el-dialog v-model="testvisible" :appendToBody="true" title="测试配置" class="testdialog" width="70%">
    <div class="test-main">
      <el-row :span="24">
        <el-col :span="16">
          <div class="test-row">
            <div class="test-item">
              <p class="">请求方式</p>
              <el-select v-model="method" placeholder="请选择">
                <el-option v-for="item in methodList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
            <!-- <div class="test-item">
              <p class="">接口协议</p>
              <el-radio v-model="testhttp" label="0">https</el-radio>
              <el-radio v-model="testhttp" label="1">http</el-radio>
            </div> -->
          </div>
          <div class="test-row">
            <div class="test-item">
              <p>接口路径 :</p>
              <el-input v-model="data.url"></el-input>
            </div>
            <div class="test-item">
              <p>测试数据类型 ：</p>
              <el-radio v-model="datatype" label="0">Body</el-radio>
              <el-radio v-model="datatype" label="1">文件</el-radio>
            </div>
          </div>
          <div class="test-row">
            <p>请求头（Headers）：</p>
            <el-form>
              <template v-for="(item, index) in itemList" :key="index">
                <el-form-item>
                  <span class="test-item1">
                    <p>Key</p>
                    <el-input v-model="item.key" :disabled="item.edit"></el-input>
                  </span>
                  <span class="test-item1">
                    <p>Value</p>
                    <el-input v-model="item.value" :disabled="item.edit"></el-input>
                  </span>
                  <el-button type="text" @click="delitemList(index)">删除</el-button></el-form-item
                >
              </template>
            </el-form>
          </div>
          <el-button type="text" @click="additemList"
            ><el-icon class="el-icon--upload"><Plus /></el-icon>添加参数</el-button
          >
          <div class="test-row">
            <div class="test-item">
              <p>服务地址预览 :</p>
              <div>{{ data.url }}</div>
            </div>
          </div>
          <div class="test-row">
            <div style="width: 100%">
              <p>测试输入（Body）</p>
              <!-- <el-upload
                multiple
                v-if="datatype === '1'"
                ref="uploadref"
                :httpRequest="handleUpload"
                :onRemove="handleRemove"
                :onChange="handleChange"
                :onSuccess="handleSuccee"
                :beforeUpload="beforeUpload"
                :fileList="fileList"
              >
                <el-button
                  ><el-icon class="el-icon--upload"><Upload /></el-icon>点击上传</el-button
                >
                <div class="el-upload__tip">不超过500m</div>
              </el-upload> -->
              <el-upload
                v-if="datatype === '1'"
                ref="uploadref"
                multiple
                :headers="{ 'Fawkes-Auth': accessToken }"
                action="/api/sys-storage/upload"
                :onRemove="handleRemove"
                :onChange="handleChange"
                :onSuccess="handleSuccee"
                :beforeUpload="beforeUpload"
                :fileList="fileList"
              >
                <el-button
                  ><el-icon class="el-icon--upload"><Upload /></el-icon>点击上传</el-button
                >
                <div class="el-upload__tip">不超过500m</div>
              </el-upload>
              <div v-if="datatype === '0'">
                <el-radio-group v-model="bodyType">
                  <el-radio :label="0">form-data</el-radio>
                  <el-radio :label="1">x-www-form-urlencoded</el-radio>
                  <el-radio :label="2">raw</el-radio>
                </el-radio-group>
                <template v-if="bodyType !== 2">
                  <el-form>
                    <template v-for="(item, index) in bodyformList" :key="index">
                      <el-form-item>
                        <span class="test-item1">
                          <p>Key</p>
                          <el-input v-model="item.key">
                            <template v-if="bodyType === 0" #append>
                              <el-select
                                v-model="bodyformList[index].seletValue"
                                placeholder=""
                                style="width: 115px"
                                @change="selectChange(bodyformList[index].seletValue)"
                              >
                                <el-option
                                  v-for="(el, index) in optionsList"
                                  :key="index"
                                  :label="el"
                                  :value="index"
                                ></el-option>
                                <!-- <el-option label="文本" value="1" />
                                <el-option label="文件" value="2" /> -->
                              </el-select>
                            </template>
                          </el-input>
                        </span>
                        <span class="test-item1">
                          <p>Value</p>
                          <el-upload
                            v-if="bodyformList[index].seletValue === 1 && bodyType === 0"
                            ref="uploadref"
                            multiple
                            :headers="{ 'Fawkes-Auth': accessToken }"
                            action="/api/sys-storage/upload"
                            :onRemove="handleRemove"
                            :onChange="handleChange"
                            :onSuccess="
                              (response, file, file_list) => {
                                return msgPaySuccess(response, file, file_list, index)
                              }
                            "
                            :beforeUpload="beforeUpload"
                            :fileList="fileList"
                          >
                            <el-button
                              ><el-icon class="el-icon--upload"><Upload /></el-icon>点击上传</el-button
                            >
                            <!-- <div class="el-upload__tip">不超过500m</div> -->
                          </el-upload>
                          <el-input v-else v-model="item.value"></el-input>
                        </span>
                        <el-button type="text" @click="delbodyList(index)">删除</el-button></el-form-item
                      >
                    </template>
                  </el-form>
                  <el-button type="text" @click="addbodyList"
                    ><el-icon class="el-icon--upload"><Plus /></el-icon>添加参数</el-button
                  ></template
                >
                <JsonEditor
                  v-if="bodyType === 2"
                  ref="monacoEdit"
                  v-model:modelValue="rawdata"
                  :readonly="false"
                  main="json"
                  type="json"
                  :height="300"
                />
              </div>
            </div>
          </div>
          <div>
            <el-button type="primary" @click="testclick">执行</el-button>
            <!-- <el-button type="primary" @click="testclick">停止</el-button>
            <el-button type="primary" @click="testclick">重置</el-button> -->
          </div>
        </el-col>
        <el-col :span="8">
          <div>
            <div style="float: left">返回结果</div>
            <el-button v-if="resultData" style="float: right" type="text" @click="downData">下载</el-button>
          </div>
          <div style="margin-top: 30px">
            {{ resultData }}
          </div>
          <div style="position: absolute; bottom: 20px">
            <span v-if="responseStatus" class="succeessText">状态码:{{ responseStatus }}</span>
            <span v-if="responseTime" class="succeessText">响应时间:{{ responseTime }} ms</span>
            <span v-if="responseSize" class="succeessText">响应大小:{{ responseSize }} B</span>
          </div>
        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>

主要测试代码

function testclick() {
  if (!props.data.url) {
    FksMessage.error('请配置接口路径')
    return
  }
  const obj = {}
  const code = 'ACCESSCODE'
  obj['Authorization'] = `${code} ${props.data.accessCode}`
  itemList.value.forEach((el) => {
    if (el.key) {
      obj[el.key] = el.value
    } else {
      delete obj[el.key]
    }
  })
  let dataparams
  // body
  if (datatype.value === '0') {
    // form-data
    if (bodyType.value === 0) {
      let formdata = new FormData()
      bodyformList.value.forEach((el) => {
        formdata.append(el.key, el.value)
      })
      dataparams = formdata
      obj['Content-Type'] = 'multipart/form-data; boundary=<calculated when request is sent>'
    }
    // x-www
    if (bodyType.value === 1) {
      const params = new URLSearchParams()
      bodyformList.value.forEach((el) => {
        params.append(el.key, el.value)
      })
      dataparams = params
      obj['Content-Type'] = 'application/x-www-form-urlencoded'
    }
    // raw
    if (bodyType.value === 2) {
      dataparams = rawdata.value
      obj['Content-Type'] = 'application/json'
    }
  }
  // binary
  if (datatype.value === '1') {
    // const formData = new FormData()
    // formData.append('file', fileList.value.file)
    dataparams = fileData.value
    obj['Content-Type'] = 'application/octet-stream'
  }

  const dataMethod = methodList.value.find((el) => {
    return el.value === method.value
  })

  const options = {
    method: dataMethod.label,
    headers: obj,
    data: dataparams
  }
  const url = props.data.url
  const startTime = performance.now()

  axios(url, options)
    .then((res) => {
      const endTime = performance.now()
      responseTime.value = Math.round(endTime - startTime)
      responseStatus.value = res.status
      resultData.value = res.data
      if (res.headers['content-length']) {
        responseSize.value = parseInt(res.headers['content-length'], 10)
      } else {
        // 如果服务器没有返回Content-Length，则无法直接获取响应大小
        responseSize.value = '未知'
      }
    })
    .catch((err) => {
      console.log(err)
      if (err.response) {
        responseStatus.value = err.response.status
      }
      resultData.value = err
    })
}