request.uvue

<template>
  <view style="flex: 1;">
    <view class="uni-padding-wrap uni-common-mt">
      <view class="uni-common-mt" style="border-width: 2px;border-style: solid; border-radius: 4px;">
        <textarea :value="res" class="uni-textarea" style="width: 100%;"></textarea>
      </view>
      <view>
        <text>地址 : {{ host + url}}</text>
        <text>请求方式 : {{method}}</text>
      </view>
      <view class="uni-btn-v uni-common-mt">
        <button type="primary" @click="sendRequest">发起请求</button>
      </view>
    </view>
    <scroll-view style="flex: 1;" show-scrollbar="true">
      <view style="padding: 20px;">
        <text>设置请求方式</text>
        <view class="uni-common-pb"></view>
        <view style="flex-direction: row;flex-wrap: wrap;">
          <button style="padding: 5px; margin-right: 10px;" type="primary" size="mini"
            @click="changeMethod('GET')">GET</button>
          <button style="padding: 5px; margin-right: 10px; " type="primary" size="mini"
            @click="changeMethod('POST')">POST</button>
          <button style="padding: 5px; margin-right: 10px; " type="primary" size="mini"
            @click="changeMethod('PUT')">PUT</button>
          <button style="padding: 5px; margin-right: 10px;" type="primary" size="mini"
            @click="changeMethod('DELETE')">DELETE</button>
          <button style="padding: 5px; margin-right: 10px; " type="primary" size="mini"
            @click="changeMethod('PATCH')">PATCH</button>
          <button style="padding: 5px;margin-right: 10px;" type="primary" size="mini"
            @click="changeMethod('OPTIONS')">OPTIONS</button>
          <button style="padding: 5px;" type="primary" size="mini" @click="changeMethod('HEAD')">HEAD</button>
        </view>
      </view>
      <view style="padding: 20px;">
        <text>请求返回错误码的接口（默认为GET）</text>
        <view class="uni-common-pb"></view>
        <view style="flex-direction: row;flex-wrap: wrap;">
          <button style="padding: 5px;" type="primary" size="mini" v-for="(item, index) in errorCodeUrls" :key="index"
            @click="changeUrl(item)">{{item}}</button>
        </view>
      </view>
      <view style="padding: 20px;">
        <text>请求不同header的接口（默认为GET）</text>
        <view class="uni-common-pb"></view>
        <view style="flex-direction: row;flex-wrap: wrap;">
          <button style="padding: 5px;" type="primary" size="mini" v-for="(item, index) in headerUrls" :key="index"
            @click="changeUrl(item)">{{item}}</button>
        </view>
      </view>
      <view style="padding: 20px;">
        <text>请求不同content-type的接口（默认为GET）</text>
        <view class="uni-common-pb"></view>
        <view style="flex-direction: row;flex-wrap: wrap;">
          <button style="padding: 5px;" type="primary" size="mini" v-for="(item, index) in contentTypeUrls" :key="index"
            @click="changeUrl(item)">{{item}}</button>
        </view>
      </view>

      <view style="padding: 20px;">
        <text>POST请求(有body)</text>
        <view class="uni-common-pb"></view>
        <view style="flex-direction: row;flex-wrap: wrap;">
          <button style="padding: 5px;" type="primary" size="mini" v-for="(item, index) in postUrls" :key="index"
            @click="changeUrlFromPost(item)">{{item}}</button>
        </view>
      </view>
    </scroll-view>
  </view>
</template>
<script>
  // #ifdef APP
  import {
    testInovkeRequest,
    CommonOptions
  } from '@/uni_modules/test-invoke-network-api'
  // #endif

  class GETDataType {
    data: UTSJSONObject | null = null
  }

  const duration = 2000
  const methodMap = {
    "GET": "/api/http/method/get",
    "POST": "/api/http/method/post",
    "PUT": "/api/http/method/put",
    "DELETE": "/api/http/method/delete",
    "PATCH": "/api/http/method/patch",
    "OPTIONS": "/api/http/method/options",
    "HEAD": "/api/http/method/head"
  }


  export default {
    data() {
      return {
        title: 'request',
        res: '',
        task: null as RequestTask | null,
        host: "https://request.dcloud.net.cn",
        url: "/api/http/method/get",
        method: "GET" as RequestMethod | null,
        data: null as any | null,
        header: null as UTSJSONObject | null,
        errorCodeUrls: [
          "/api/http/statusCode/200",
          "/api/http/statusCode/204",
          "/api/http/statusCode/301",
          "/api/http/statusCode/302",
          "/api/http/statusCode/307",
          "/api/http/statusCode/400",
          "/api/http/statusCode/401",
          "/api/http/statusCode/403",
          "/api/http/statusCode/404",
          "/api/http/statusCode/405",
          "/api/http/statusCode/500",
          "/api/http/statusCode/502",
          "/api/http/statusCode/503",
          "/api/http/statusCode/504",
        ],
        headerUrls: [
          "/api/http/header/ua",
          "/api/http/header/referer",
          "/api/http/header/requestCookie",
          "/api/http/header/setCookie",
          "/api/http/header/deleteCookie"
        ],
        contentTypeUrls: [
          "/api/http/contentType/text/plain",
          "/api/http/contentType/text/html",
          "/api/http/contentType/text/xml",
          "/api/http/contentType/image/gif",
          "/api/http/contentType/image/jpeg",
          "/api/http/contentType/image/png",
          "/api/http/contentType/application/json",
          "/api/http/contentType/application/octetStream",
        ],
        postUrls: [
          "/api/http/contentType/json",
          "/api/http/contentType/xWwwFormUrlencoded",
        ],
        //自动化测试例专用
        jest_result: false
      }
    },
    onLoad() {
    },
    onUnload() {
      uni.hideLoading();
      this.task?.abort();
    },
    methods: {
      changeMethod(e : RequestMethod) {
        this.method = e;
        this.url = methodMap[e] as string;
        this.data = null;
        this.header = null;
      },
      changeUrl(e : string) {
        this.method = "GET";
        this.url = e;
        this.data = null;
        this.header = null;
      },
      changeUrlFromPost(e : string) {
        this.method = "POST";
        this.url = e;
        switch (e) {
          case "/api/http/contentType/json":
            this.header = {
              "Content-Type": "application/json"
            };
            this.data = {
              "hello": "world"
            };
            break;
          case "/api/http/contentType/xWwwFormUrlencoded":
            this.header = {
              "Content-Type": "application/x-www-form-urlencoded"
            };
            this.data = "hello=world";
            break;
        }
      },
      sendRequest() {
        uni.showLoading({
          title: "请求中..."
        })
        this.task = uni.request({
          url: this.host + this.url,
          // dataType: "json",
          // responseType: "json",
          method: this.method,
          data: this.data,
          header: this.header,
          timeout: 6000,
          sslVerify: false,
          withCredentials: false,
          firstIpv4: false,
          success: (res) => {
            console.log('request success', JSON.stringify(res.data))
            console.log('request success header is :', JSON.stringify(res.header))
            uni.showToast({
              title: '请求成功',
              icon: 'success',
              mask: true,
              duration: duration
            });
            this.res = '请求结果 : ' + JSON.stringify(res);
          },
          fail: (err) => {
            console.log('request fail', err);
            uni.showModal({
              content: err.errMsg,
              showCancel: false
            });
          },
          complete: () => {
            uni.hideLoading()
          },
        });
      },
      //自动化测试例专用
      jest_request() {
        uni.request({
          url: this.host + this.url,
          // dataType: "json",
          // responseType: "json",
          method: this.method,
          data: this.data,
          header: this.header,
          timeout: 6000,
          sslVerify: false,
          withCredentials: false,
          firstIpv4: false,
          success: () => {
            this.jest_result = true;
          },
          fail: () => {
            this.jest_result = false;
          },
        });
      },
      jest_set_cookie() {
        uni.request({
          url: this.host + "/api/http/header/setCookie",
          method: "GET",
          timeout: 6000,
          sslVerify: false,
          withCredentials: false,
          firstIpv4: false,
          success: () => {
            this.jest_cookie_request(true)
          },
          fail: () => {
            this.jest_result = false;
          },
        });
      },
      jest_delete_cookie() {
        uni.request({
          url: this.host + "/api/http/header/deleteCookie",
          method: "GET",
          timeout: 6000,
          sslVerify: false,
          withCredentials: false,
          firstIpv4: false,
          success: () => {
            this.jest_cookie_request(false)
          },
          fail: () => {
            this.jest_result = false;
          },
        });
      },
      jest_cookie_request(needCookie : boolean) {
        uni.request({
          url: this.host + "/api/http/header/requestCookie",
          method: "GET",
          timeout: 6000,
          sslVerify: false,
          withCredentials: false,
          firstIpv4: false,
          success: (res) => {
            const requestCookie = (res.data as UTSJSONObject).getJSON("data")?.getAny("requestCookie")
            console.log("requestCookie ", requestCookie);
            if (requestCookie instanceof Array) {
              this.jest_result = needCookie ? requestCookie.length > 0 : requestCookie.length == 0
            } else {
              this.jest_result = needCookie ? (requestCookie as UTSJSONObject).toMap().size > 0 : (requestCookie as UTSJSONObject).toMap().size == 0
            }
          },
          fail: () => {
            this.jest_result = false;
          },
        });
      },
      jest_timeout_null() {
        uni.request({
          url: this.host + (methodMap['GET'] as string),
          method: "GET",
          timeout: null,
          sslVerify: false,
          withCredentials: false,
          firstIpv4: false,
          success: () => {
            this.jest_result = true;
          },
          fail: () => {
            this.jest_result = false;
          },
        });
      },
      jest_get_with_data() {
        uni.request({
          url: "https://unidemo.dcloud.net.cn/api/banner/36kr",
          method: "GET",
          data:{
            column: 'id,post_id,title,author_name,cover,published_at' //需要的字段名
          },
          timeout: 6000,
          sslVerify: false,
          withCredentials: false,
          firstIpv4: false,
          success: () => {
            this.jest_result = true;
          },
          fail: () => {
            this.jest_result = false;
          },
        });
      },
      jest_get_with_generics() {
        uni.request<GETDataType>({
          url: this.host + (methodMap['GET'] as string),
          method: "GET",
          timeout: null,
          sslVerify: false,
          withCredentials: false,
          firstIpv4: false,
          success: (res: RequestSuccess<GETDataType>) => {
            console.log("success :", res.data?.data);
            this.jest_result = true;
          },
          fail: () => {
            this.jest_result = false;
          },
        });
      },
      jest_get_array() {
        uni.request<UTSJSONObject[]>({
          url: 'https://unidemo.dcloud.net.cn/api/news?column=title,author_name,cover,published_at',
          method: "GET",
          success: (res : RequestSuccess<UTSJSONObject[]>) => {
            console.log(res)
            if (res.statusCode == 200 && Array.isArray(res.data)) {
              this.jest_result = true
            } else {
              this.jest_result = false
            }
          },
          fail: () => {
            this.jest_result = false
          }
        });
      },
      jest_uts_module_invoked(){
        // #ifdef APP
        testInovkeRequest({
          success:(res: any)=>{
            console.log("success :", res);
            this.jest_result = true
          },
          fail:(err: any)=>{
            console.log("fail :", err);
            this.jest_result = false
          }
        } as CommonOptions)
        // #endif
      }
    }
  }
</script>