axios使用知识点总结

Axios GET与POST请求详解

最新推荐文章于 2024-08-30 16:14:24 发布

原创最新推荐文章于 2024-08-30 16:14:24 发布 · 5.2k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#函数 #axios

JavaScript 专栏收录该内容

43 篇文章

订阅专栏

本文探讨了使用Axios库进行GET与POST请求时的不同方法及其注意事项。GET请求通过直接拼接或使用params参数，后者会对参数进行编码；POST请求则介绍了如何使用URLSearchParams或qs库来构造请求体。

概要

最近的一个项目中使用了axios来代替XMLHttpRequest来发送请求。也是遇到了一些问题。这里做下简单的记录。

GET请求不同方式结果不同

官方文档我们可以看到的示例demo如下：


// 直接在请求理解里面拼接参数get参数
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 或者是使用对象的方式填写params参数
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

上面的示例代码看起来是一样的，其实有个细节还是不一样的，就是使用第二种方式会对参数值执行encodeURIComponent。

看我的一段代码：

// 直接在请求理解里面拼接参数get参数
axios.get('/user?testurl=http://test.aaa.com')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 或者是使用对象的方式填写params参数
axios.get('/user', {
    params: {
      testurl: 'http://test.aaa.com'
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

在浏览器端测试后观察请求的url的参数可以发现。

第一种方式，没有对参数进行编码。第二种方式可以看到对参数进行了encodeURIComponent操作。所以在使用的过程中，如果我们的后端需要前端在传递参数前对某些参数进行encodeURIComponent。在使用这两种方式的时候可以注意一下，防止多encode一次造成后端接受参数错误。

POST请求的发送

我主要是在浏览器端使用axios来发送请求。而且它的请求返回的是一个Promise对象。我可以很方便的处理请求的结果。

在官方文档中是这样描述的，如果在浏览器端需要发送post请求，需要使用URLSearchParams。

var params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);

但是在官方文档中也很明确的说明了URLSearchParams不是支持所有的浏览器的。我们需要使用polyfill来兼容一些低版本的浏览器。

或者是使用qs来对url进行编码。


// npm install qs --save or  yarn add qs

var qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 }));

这里说下使用polyfill会遇到的问题。官方推荐的polyfill是url-search-params。说明中是这样描述的：

Note that URLSearchParams is not supported by all browsers (see caniuse.com), but there is a polyfill available (make sure to polyfill the global environment)。

当我们的使用webpack或者是fis3开发的时候默认都是把npm依赖作为依赖包来处理的。这里的global其实就是让我们不要把这个文件作为一个Npm依赖包，而且直接引入到我们的Html中。

比如在我们的body标签的底部

<body>

    <script src="../xxxx/url-search-params.js"></script>
</body>

那么我如果我想使用CMD规范或者是ES6 的import呢？我们可以使用url-search-params-polyfill

参考文档后，如果我们想要使用CMD规范：

require('url-search-params-polyfill');

ES6的写法

import 'url-search-params-polyfill';

也可以直接在Html标签中直接引用：

<script src="index.js"></script>

axios使用知识点总结

概要

GET请求不同方式结果不同

POST请求的发送

扩展POST请求提交数据的方式