JS HTTP GET/POST request

在本文中，我们展示了如何在 JavaScript 中创建 HTTP GET 和 POST 请求。我们使用 Fetch API 和 Axios 库。

HTTP

超文本传输​​协议 (HTTP) 是分布式协作超媒体信息系统的应用协议。 HTTP协议是万维网数据通信的基础。

HTTP 获取

HTTP GET 方法请求指定资源的表示。使用 GET 的请求应该只检索数据。

HTTP 发送

HTTP POST 方法向服务器发送数据。它通常在上传文件或提交完整的网络表单时使用。

获取 API

Fetch API 提供了一个 JavaScript 接口，用于访问和操作 HTTP 管道的各个部分，例如请求和响应。 API 起源于浏览器。

fetch 是一个全局函数，它接受 url 和选项参数并返回一个承诺。承诺解决请求的响应。

let promise = fetch(url, [options])

如果我们不提供options，将生成一个简单的 GET 请求来下载 url 的内容。

公理

Axios 是浏览器和 Node.js 的基于承诺的 HTTP 客户端。Axios 可以轻松地将异步 HTTP 请求发送到 REST 端点并执行 CRUD 操作。它可以在纯 JavaScript 中使用，也可以与 Vue 或 React 等库一起使用。

JS 获取 GET 请求

以下示例创建一个简单的 GET 请求并将结果作为文本处理。

<script>
    async function doRequest() {
        let url = 'http://webcode.me';
        let res = await fetch(url);

        if (res.ok) {

            let text = await res.text();

            return text;
        } else {
            return `HTTP error: ${res.status}`;
        }
    }

    doRequest().then(data => {
        console.log(data);
    });

</script>

我们得到了 webcode.me 网页的内容。

let url = 'http://webcode.me';
let res = await fetch(url);

fetch 方法只接受 URL 作为参数。在这种情况下，默认请求是 GET 请求。

let text = await res.text();

我们从纯文本形式的请求中获取正文。

JS 获取 POST 请求

在下一个示例中，我们使用 JSON 数据创建一个 POST 请求。

<script>
    async function doRequest() {

        let url = 'http://httpbin.org/post';
        let data = {'name': 'John Doe', 'occupation': 'John Doe'};

        let res = await fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(data),
        });

        if (res.ok) {

            // let text = await res.text();
            // return text;

            let ret = await res.json();
            return JSON.parse(ret.data);

        } else {
            return `HTTP error: ${res.status}`;
        }
    }

    doRequest().then(data => {
        console.log(data);
    });

</script>

POST 请求发送到 http://httpbin.org/post。

let data = {'name': 'John Doe', 'occupation': 'John Doe'};

这是要发送的数据。

let res = await fetch(url, {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
});

我们将method 参数设置为POST 并选择application/json 作为内容类型。数据被字符串化为body参数。

let ret = await res.json();
return JSON.parse(ret.data);

我们将数据作为 JSON 字符串取回并将其解析为 JSON 对象。

使用 Axios 的 JS GET 请求

以下示例使用 Axios 库创建 GET 请求。

$ npm i axios

我们安装 Axios 模块。

const axios = require('axios');

async function doGetRequest() {

  let res = await axios.get('http://webcode.me');

  let data = res.data;
  console.log(data);
}

doGetRequest();

该示例从一个简单的网站检索主页。它使用async/await 语法。

使用 Axios 的 JS POST 请求

在下面的示例中，我们生成一个带有表单数据的 POST 请求。

$ npm i axios form-data

我们安装form-data模块。

使用 application/x-www-form-urlencoded，数据在请求正文中发送；键和值被编码在由“&”分隔的键值元组中，键和值之间有一个“=”。

const axios = require('axios');
const FormData = require('form-data');

async function doPostRequest() {

    const form_data = new FormData();

    form_data.append('name', 'John Doe');
    form_data.append('occupation', 'gardener');

    let res = await axios.post('http://httpbin.org/post', form_data, 
        { headers: form_data.getHeaders() });

    let data = res.data;
    console.log(data);
} 

doPostRequest();

为了以适当的格式生成表单数据，我们使用 FormData 对象。

在本文中，我们使用 JavaScript 创建了 HTTP GET/POST 请求。

列出 JavaScript 教程。