举例说明如何使用Axios发送PUT HTTP请求

方石剑
1,906 阅读5分钟

简介

Axios是一个JavaScript库，用于在浏览器或Node.js中进行HTTP请求。

与流行的Requests库不同，Axios是基于承诺的，这使得它更适合于利用较新的JavaScript特性的现代应用，如承诺和async/await语法。

如果你在网络开发方面有经验，并且只想找到一个答案，即如何用Axios发送PUT请求--长话短说。

const axios = require('axios');

// Wrapper, specific put() function
const res = await axios.put('/api/article/123', {
    title: 'Making PUT Requests with Axios',
    status: 'published'
});

// General HTTP function
const res = await axios({
    method: 'put',
    url: '/api/article/123',
    data: {
        title: 'Making PUT Requests with Axios',
        status: 'published'
    }
});

但是，如果你是使用Axios的新手，或者想知道更多关于这个工作的情况--请继续阅读

HTTP请求和动词

现代网络是建立在HTTP协议和一个请求-响应的生命周期之上的，在这个生命周期中，客户端请求一个资源，而服务器则对其进行响应。

HTTP协议定义了一些具有不同意图的方法，即GET 、POST 、DELETE ，等等，这些方法允许客户端 "说明 "他们的意图。比较常见的HTTP方法之一是PUT ，它最常用于向服务器发送数据，可以是创建一个新的资源，也可以是对现有资源进行修补或编辑数据。

例如，一个博客的REST API服务可能有一个路由，允许你用 ***CRUD（创建、读取、更新、删除）***对article 资源进行操作，路径为/api/article/[id] 。

向这个路径发送一个GET 的请求，可能会返回id 所指定的文章。向这个路径发送一个PUT 的请求，会编辑指定属性的文章。这些属性可以在请求的正文中指定，默认情况下会被序列化为JSON格式。

用Axios发送一个PUT请求

让我们看看如何使用Axios库从你的JavaScript应用程序中发送一个HTTP PUT请求。

首先，你可以使用yarn 或npm 安装axios 。

$ npm install axios --save

$ yarn add axios

它也可以通过一些CDNs（如*jsDelivr）*用于前端应用程序。

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

一旦该库被安装，你就需要实例化一个实例。

const axios = require('axios');

axios 进行PUT 调用的最简单方法是简单地使用put() 实例的函数，并以JavaScript对象的形式提供该请求的主体。

const res = await axios.put('/api/article/123', {
    title: 'Making PUT Requests with Axios',
    status: 'published'
});

这里需要的唯一参数是URL和你想发送的数据，在我们的例子中是我们想在文章资源中编辑的标题。

我们创建的用于保存title 和status 的JavaScript对象被序列化为JSON，发送到一个请求处理程序，该程序执行一个动作并返回一个结果。我们发送的请求的body 是序列化的JSON，它可以很容易地在后端被检索。

由于发送的是JSON--这是一种非常通用的格式，大多数框架在读取发送的数据并将其反序列化为后端使用的任何表示方式时都不会有任何问题，无论技术栈如何。

Axios返回的对象，在这种情况下是res ，对所有调用都有一个标准的模式。

{
    data: {},
    status: 200,
    statusText: 'OK',
    headers: {},
    config: {},
    request: {}
}

其中。

  • data:由你调用的服务返回的数据--通常是来自REST API的JSON响应。
  • status:服务返回的HTTP状态，表示操作的情况--如200（OK）、301（永久移动）、*404（未找到）*等。
  • statusText:HTTP状态文本，以人类可读的格式描述状态代码--如 "OK"、"永久移动 "或 "未找到"。
  • headers:: 一个包含由服务返回的所有标头的对象，如'Cache-Control'。
  • config:: 提供给调用的配置对象（可选）。
  • request:此调用的请求对象，在Node.js中是一个ClientRequest ，在浏览器中是XMLHttpRequest 。

另一种使用Axios进行PUT请求的方式是一种更通用的方法，在参数中指定HTTP方法。

这是通过使用axios() 默认方法和配置对象来实现的。

const res = await axios({
    method: 'put',
    url: '/api/article/123',
    data: {
        title: 'Making PUT Requests with Axios',
        status: 'published'
    }
});

这个调用的结果和前面的axios.put() 调用完全一样--唯一的区别是axios.put() 方法是一个方便的方法，它包装了一般的方法，给它注入了method: 'put' 字段。

axios()vsput()

那么，为什么你要使用一个方法而不是另一个呢？这可能取决于一些因素，比如可读性或使用该方法的环境，但在很大程度上也取决于你的个人偏好。

更加通用的axios() ，因为所有的选项/configs都是在同一个对象中指定的，所以更容易添加更多的配置，比如说头文件，或者切换方法动词。

由于put() 方法只是封装了axios() ，所以基本功能是相同的。

处理错误

**注意：**当发送请求时，你可能不一定能得到预期的结果。

一般来说--你会想尝试发送一个请求，如果在这个过程中出现异常，就捕捉异常，这对调用过程有一点点改变。

try {
    const { data } = await axios({
        method: 'put',
        url: '/api/article/123',
        data: {
            title: 'Making PUT Requests with Axios',
            status: 'published'
        }
    });

    console.log(data);
} catch (err) {
    if (err.response.status === 404) {
        console.log('Resource could not be found!');
    } else {
        console.log(err.message);
    }
}

这里的主要区别是错误处理，它使用错误内的response 对象来确定原因，而不是从调用本身返回的data 对象。

通常情况下，错误处理比仅仅检查状态是否为单一的整数更稳健--然而，这种方式可以根据请求的处理方式（或不处理）来改变逻辑的流程。

总结

在这篇文章中，我们对Axios库和HTTP PUT方法进行了简短的介绍。

我们还展示了几个例子，说明如何使用Axios来进行PUT调用，以及如何调用其他配置和如何处理简单的错误。

avatar
文章
阅读
粉丝