axios使用知识点总结

分手后的思念是犯贱 2022-06-08 12:26 274阅读 0赞

## 概要 ##

最近的一个项目中使用了`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的参数可以发现。

![10_imageslim][]

第一种方式，没有对参数进行编码。第二种方式可以看到对参数进行了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标签的底部

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

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

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

ES6的写法

import 'url-search-params-polyfill';

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

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

![006tKfTcly1fmv7y2wd49j31kw0sj4nt.jpg][]

[10_imageslim]: http://7xs2tr.com1.z0.glb.clouddn.com/zhiqiang21/88kz9.jpg?imageMogr2/auto-orient/thumbnail/!80p/blur/1x0/quality/75|watermark/2/text/aHR0cHM6Ly9naXRodWIuY29tL3poaXFpYW5nMjE=/font/5b6u6L2v6ZuF6buR/fontsize/400/fill/I0ZBMEMwQw==/dissolve/100/gravity/SouthEast/dx/10/dy/10|imageslim
[006tKfTcly1fmv7y2wd49j31kw0sj4nt.jpg]: https://ws3.sinaimg.cn/large/006tKfTcly1fmv7y2wd49j31kw0sj4nt.jpg