Node.js与浏览器结合的HTTP客户端实现

发表时间: 2022-10-17 00:00

《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目,包括技术、学习、实用与各种有趣的内容。本期推荐的Axios是node.js和浏览器的基于承诺的HTTP客户端。

特性

  • 从浏览器创建xmlhttprequest
  • 从node.js发出http请求
  • 支持Promise API
  • 拦截请求和响应
  • 转换请求和响应数据
  • 取消请求
  • 自动转换JSON数据
  • 保护XSRF的客户端支持

安装

使用npm:

$ npm install axios

使用bower:

$ bower install axios

使用yarn:

$ yarn add axios

使用jsDelivr CDN:

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

使用unpkg CDN:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

示例

注意:CommonJS的使用

为了在使用require()导入CommonJS时获得TypeScript类型(用于智能感知/自动完成),请使用以下方法:

const axios = require('axios').default;// axios.<method> will now provide autocomplete and parameter typings

执行GET请求

const axios = require('axios').default;// Make a request for a user with a given IDaxios.get('/user?ID=12345')  .then(function (response) {    // handle success    console.log(response);  })  .catch(function (error) {    // handle error    console.log(error);  })  .finally(function () {    // always executed  });// Optionally the request above could also be done asaxios.get('/user', {    params: {      ID: 12345    }  })  .then(function (response) {    console.log(response);  })  .catch(function (error) {    console.log(error);  })  .finally(function () {    // always executed  });// Want to use async/await? Add the `async` keyword to your outer function/method.async function getUser() {  try {    const response = await axios.get('/user?ID=12345');    console.log(response);  } catch (error) {    console.error(error);  }}

axios API

可以通过将相关的配置传递给axios来发出请求。

axios(config)

// Send a POST requestaxios({  method: 'post',  url: '/user/12345',  data: {    firstName: 'Fred',    lastName: 'Flintstone'  }});
// GET request for remote image in node.jsaxios({  method: 'get',  url: 'https://bit.ly/2mTM3nY',  responseType: 'stream'})  .then(function (response) {    response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))  });

请求方法的别名

为了方便起见,为所有通用请求方法提供了别名。

  • axios.request(config)
  • axios.get(url[, config])
  • axios.delete(url[, config])
  • axios.head(url[, config])
  • axios.options(url[, config])
  • axios.post(url[, data[, config]])
  • axios.put(url[, data[, config]])
  • axios.patch(url[, data[, config]])

文件上传

单文件上传

await axios.postForm('https://httpbin.org/post', {  'myVar' : 'foo',  'file': document.querySelector('#fileInput').files[0]});

或多个文件multipart/form-data:

await axios.postForm('https://httpbin.org/post', {  'files[]': document.querySelector('#fileInput').files});

FileList对象可以直接传递:

await axios.postForm('https://httpbin.org/post', document.querySelector('#fileInput').files)


—END—

开源协议:MIT license

开源地址:https://github.com/axios/axios