Axios 教程 · ZetCode 中文系列教程

# Axios 教程 > 原文： [http://zetcode.com/javascript/axios/](http://zetcode.com/javascript/axios/) Axios 教程展示了如何使用 Axios 客户端库在 JavaScript 中生成请求。 ## Axios Axios 是用于浏览器和 Node.js 的基于 Promise 的 HTTP 客户端。 Axios 使向 REST 端点发送异步 HTTP 请求和执行 CRUD 操作变得容易。它可以在普通 JavaScript 中使用，也可以与 Vue 或 React 之类的库一起使用。在本教程中，我们将在 Node.js 应用中使用 Axios。 ## 安装 Axios 首先，我们安装 Axios。 ```js $ node -v v11.5.0 ``` 我们使用 Node.js 11.5 版。 ```js $ npm init -y ``` 我们启动一个新的 Node.js 应用。 ```js $ npm i axios ``` 我们使用`npm i axios`命令安装 Axios。 ## Axios 响应对象当我们向服务器发送请求时，它返回一个响应。 Axios 响应对象包括： * `data` - 服务器返回的有效负载 * `status` - 服务器返回的 HTTP 代码 * `statusText` - 服务器返回的 HTTP 状态消息 * `header` - 服务器发送的标头 * `config` - 原始请求配置 * `request` - 请求对象 ## 带回调的 Axios GET 请求在第一个示例中，我们创建一个简单的 GET 请求。我们使用回调。 `simple_get.js` ```js const axios = require('axios'); axios.get('http://webcode.me').then(resp => { console.log(resp.data); }); ``` 我们生成一个简单的 GET 请求并显示输出。 ```js const axios = require('axios'); ``` 包括 Axios 库。 ```js axios.get('http://webcode.me').then(resp => { console.log(resp.data); }); ``` 使用`get()`，我们发送一个 GET 请求。我们从响应中输出数据。数据是 HTML 代码。 ```js $node simple_get.js <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>My html page</title> </head> <body> <p> Today is a beautiful day. We go swimming and fishing. </p> <p> Hello there. How are you? </p> </body> </html> ``` 这是输出。 ## 带有异步/等待的 Axios GET 请求下面的示例创建相同的请求。这次我们使用`async/await`语法。 `simple_get.js` ```js const axios = require('axios'); async function makeGetRequest() { let res = await axios.get('http://webcode.me'); let data = res.data; console.log(data); } makeGetRequest(); ``` 该示例使用`async/await`语法创建一个简单的 GET 请求。 ## Axios HEAD 请求 HEAD 请求是没有消息正文的 GET 请求。在 Axios 中，使用`head()`创建 HEAD 请求。 `head_request.js` ```js const axios = require('axios'); async function makeHeadRequest() { let res = await axios.head('http://webcode.me'); console.log(`Status: ${res.status}`) console.log(`Server: ${res.headers.server}`) console.log(`Date: ${res.headers.date}`) } makeHeadRequest(); ``` 该示例显示了通过 HEAD 请求生成的响应的状态，服务器名称，响应日期。 ```js $ node head_request.js Status: 200 Server: nginx/1.6.2 Date: Mon, 04 Feb 2019 15:08:56 GMT ``` 这是输出。 ## Axios 基本 API `get()`，`post()`或`delete()`方法是基本 axios API 的便捷方法：`axios(config)`和`axios(url, config)`。 `basic_api.js` ```js const axios = require('axios'); async function makeRequest() { const config = { method: 'get', url: 'http://webcode.me' } let res = await axios(config) console.log(res.status); } makeRequest(); ``` 该示例向`webcode.me`创建 GET 请求。 ```js const config = { method: 'get', url: 'http://webcode.me' } ``` 我们在配置对象中指定请求的详细信息。 ## Axios 自定义标头在下面的示例中，我们发送一个自定义标头。 `custom_header.js` ```js const axios = require('axios'); async function makeRequest() { const config = { method: 'get', url: 'http://webcode.me', headers: { 'User-Agent': 'Console app' } } let res = await axios(config) console.log(res.request._header); } makeRequest(); ``` 该示例发送一个自定义的标头。 ```js const config = { method: 'get', url: 'http://webcode.me', headers: { 'User-Agent': 'Console app' } } ``` 自定义数据将添加到配置对象的`headers`属性中。 ```js console.log(res.request._header); ``` 我们验证发送的数据。 ```js $ node custom_header.js GET / HTTP/1.1 Accept: application/json, text/plain, */* User-Agent: Console app Host: webcode.me Connection: close ``` 这是输出。 ## 获取 Github 信息许多在线服务包含公共 API。在以下示例中，我们生成对 Github API 的请求。 `github.js` ```js const axios = require('axios'); async function getNumberOfFollowers() { let res = await axios.get('https://api.github.com/users/janbodnar'); let nOfFollowers = res.data.followers; let location = res.data.location; console.log(`# of followers: ${nOfFollowers}`) console.log(`Location: ${location}`) } getNumberOfFollowers(); ``` 在示例中，我们获得关注者的数量和用户的位置。 ```js $ node github.js # of followers: 44 Location: Bratislava ``` 这是输出。 ## Axios POST 请求使用`post()`方法创建 POST 请求。 `post_request.php` ```js const axios = require('axios'); async function makePostRequest() { let res = await axios.post('https://jsonplaceholder.typicode.com/posts'); console.log(`Status code: ${res.status}`); console.log(`Status text: ${res.statusText}`); console.log(`Request method: ${res.request.method}`); console.log(`Path: ${res.request.path}`); console.log(`Date: ${res.headers.date}`); console.log(`Data: ${res.data}`); } makePostRequest(); ``` 该示例创建对在线测试服务的 POST 请求。 ```js $ node post_request.js Status code: 201 Status text: Created Request method: POST Path: /posts Date: Mon, 04 Feb 2019 16:54:36 GMT Data: [object Object] ``` 这是输出。 ## Axios 下载图像以下示例显示了如何使用 Axios 下载图像。 `get_image.js` ```js const axios = require('axios'); const fs = require('fs'); var config = { responseType: 'stream' }; let url = 'httpsimg.dog.ceo/breeds/setter-english/n02100735_4870.jpg'; async function getImage() { let resp = await axios.get(url, config); resp.data.pipe(fs.createWriteStream('image.jpg')); } getImage(); ``` 该示例从在线服务中检索图像，该服务保留了狗的图像。 ```js const axios = require('axios'); const fs = require('fs'); ``` 我们包括`axios`和`fs`模块。 ```js var config = { responseType: 'stream' }; ``` 我们在配置对象中指定响应类型。 ```js let resp = await axios.get(url, config); ``` 我们得到图像。 ```js resp.data.pipe(fs.createWriteStream('image.jpg')); ``` 借助`fs`模块，我们将图像保存到磁盘。 ## Axios 多个请求我们可以使用 Axios 一次创建多个请求。 `multiple_requests.js` ```js const axios = require('axios'); async function makeRequests() { let [u1, u2] = await Promise.all([ axios.get('https://api.github.com/users/janbodnar'), axios.get('https://api.github.com/users/symfony') ]); console.log(`Jan Bodnar: ${u1.data.created_at}`); console.log(`Symfony: ${u2.data.created_at}`); } makeRequests(); ``` 要发送多个请求，我们使用`Promise.all()`方法。 ```js $ node multiple_requests.js Jan Bodnar: 2016-01-31T12:12:28Z Symfony: 2009-10-24T04:05:23Z ``` 这是输出。 ## 将 Axios 与 JSON 服务器一起使用 JSONServer 是一个很棒的工具，它使我们能够轻松创建伪造的 REST API。 ```js $ npm i -g json-server ``` 我们安装`json-server`。 `users.json` ```js { "users": [ { "id": 1, "first_name": "Robert", "last_name": "Schwartz", "email": "rob23@gmail.com" }, { "id": 2, "first_name": "Lucy", "last_name": "Ballmer", "email": "lucyb56@gmail.com" }, { "id": 3, "first_name": "Anna", "last_name": "Smith", "email": "annasmith23@gmail.com" }, { "id": 4, "first_name": "Robert", "last_name": "Brown", "email": "bobbrown432@yahoo.com" }, { "id": 5, "first_name": "Roger", "last_name": "Bacon", "email": "rogerbacon12@yahoo.com" } ] } ``` 这是我们的测试数据。 ### 启动 JSON 服务器 JSON 服务器从我们已全局安装的`json-server`启动。 ```js $ json-server --watch data.json ``` `--watch`选项用于指定服务器的数据。 ```js $ curl localhost:3000/users/2/ { "id": 2, "first_name": "Lucy", "last_name": "Ballmer", "email": "lucyb56@gmail.com" } ``` 使用 curl 命令，使用户获得 ID 2。 ## 发布用户我们发布了一个新用户。 `post_user.js` ```js const axios = require('axios'); async function makePostRequest() { params = { id: 6, first_name: 'Fred', last_name: 'Blair', email: 'freddyb34@gmail.com' } let res = await axios.post('http://localhost:3000/users/', params); console.log(res.data); } makePostRequest(); ``` 该示例发布了一个新用户。 ```js let res = await axios.post('http://localhost:3000/users/', params); ``` 将`post`参数作为第二个参数传递给`post()`方法。 ### 获取用户我们从测试服务器获取用户。 `get_users.js` ```js const axios = require('axios'); async function makeGetRequest() { let res = await axios.get('http://localhost:3000/users/'); let data = res.data; console.log(data); } makeGetRequest(); ``` 该程序从我们的测试服务器检索所有用户。 ```js $ node get_users.js [ { id: 1, first_name: 'Robert', last_name: 'Schwartz', email: 'rob23@gmail.com' }, { id: 2, first_name: 'Lucy', last_name: 'Ballmer', email: 'lucyb56@gmail.com' }, { id: 3, first_name: 'Anna', last_name: 'Smith', email: 'annasmith23@gmail.com' }, { id: 4, first_name: 'Robert', last_name: 'Brown', email: 'bobbrown432@yahoo.com' }, { id: 5, first_name: 'Roger', last_name: 'Bacon', email: 'rogerbacon12@yahoo.com' }, { id: 6, first_name: 'Fred', last_name: 'Blair', email: 'freddyb34@gmail.com' } ] ``` 这是输出。 ## 删除用户使用`delete()`删除资源。 `delete_user.js` ```js const axios = require('axios'); async function makePostRequest() { let res = await axios.delete('http://localhost:3000/users/2/'); console.log(res.status); } makePostRequest(); ``` 该示例删除具有 ID 2 的用户。在本教程中，我们使用了 JavaScript Axios 模块。您可能也对以下相关教程感兴趣： [JSON 服务器教程](/javascript/jsonserver/)，[笑话教程](/javascript/jest/)， [Moment.js 教程](/javascript/momentjs/)，[从 JavaScript 中的 URL 读取 JSON](/articles/javascriptjsonurl/) ， [JavaScript 贪食蛇教程](/javascript/snake/)， [JQuery 教程](/web/jquery/)， [Node Sass 教程](/javascript/nodesass/)， [Lodash 教程](/javascript/lodash/)。