封装ajax请求

2022 年 05 月 13 日

1065 次浏览

1945字数

<h2>前言</h2>
<p>如题，我封装了一个自己的ajax请求函数。</p>
<p>无压缩版: <span class="external-link"><a class="no-external-link" href="https://cdn.xxhzm.cn/request/request.js" target="_blank"><i data-feather="external-link"></i>https://cdn.xxhzm.cn/request/request.js</a></span></p>
<p>压缩版: <span class="external-link"><a class="no-external-link" href="https://cdn.xxhzm.cn/request/request.min.js" target="_blank"><i data-feather="external-link"></i>https://cdn.xxhzm.cn/request/request.min.js</a></span></p>
<h2>使用说明</h2>
<h5>传参</h5>
<ol>
<li>URL地址</li>
<li>请求方法(GET,POST)</li>
<li>请求参数</li>
<li>请求头</li>
<li>是否异步请求(true,false),默认开启异步请求</li>
</ol>
<h4>GET</h4>
<p>GET不带参数，不带请求头：</p>
<pre><code class="language-js">  &lt;script src=&quot;https://cdn.xxhzm.cn/request/request.min.js&quot;&gt;&lt;/script&gt;

request(&#039;user/info&#039;, &#039;GET&#039;).then(val =&gt; {
      console.log(val)
    }).catch(val =&gt; {
      console.error(val)
    })</code></pre>
<p>GET带参数，不带请求头：</p>
<pre><code class="language-js">    const data = {
      username: &#039;xxhzm&#039;,
      sex: &#039;男&#039;,
      age: &#039;16&#039;
    }

request(&#039;user/info&#039;, &#039;GET&#039;, data).then(val =&gt; {
      console.log(val)
    }).catch(val =&gt; {
      console.error(val)
    })</code></pre>
<p>GET不带参数，带请求头</p>
<pre><code class="language-js">    const header = {
      &#039;Content-Type&#039;: &#039;text/html; charset=utf-8&#039;
    }

request(&#039;user/info&#039;, &#039;GET&#039;, null, header).then(val =&gt; {
      console.log(val)
    }).catch(val =&gt; {
      console.error(val)
    })</code></pre>
<h4>POST</h4>
<p>post不带参数，不带请求头</p>
<pre><code class="language-js">    request(&#039;user/info&#039;, &#039;POST&#039;).then(val =&gt; {
      console.log(val)
    }).catch(val =&gt; {
      console.log(val)
    })</code></pre>
<p>post带参数，不带请求头</p>
<pre><code class="language-js">    const data = new URLSearchParams()
    data.append(&#039;name&#039;, &#039;xxhzm&#039;)
    data.append(&#039;sex&#039;, &#039;男&#039;)
    data.append(&#039;age&#039;, &#039;16&#039;)

request(&#039;user/info&#039;, &#039;POST&#039;, data).then(val =&gt; {
      console.log(val)
    }).catch(val =&gt; {
      console.log(val)
    })</code></pre>
<p>post不带参数，带请求头</p>
<pre><code class="language-js">    const header = {
      &#039;Content-Type&#039;: &#039;text/html; charset=utf-8&#039;
    }

request(&#039;user/info&#039;, &#039;POST&#039;, null, header).then(val =&gt; {
      console.log(val)
    }).catch(val =&gt; {
      console.log(val)
    })</code></pre>
<h4>扩展写法</h4>
<pre><code class="language-js">    const userGet = async () =&gt; {
      const res = await request(&#039;user/info&#039;, &#039;GET&#039;)
      console.log(res)
    }</code></pre>