Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

axios知识点总结_20170925 #42

Open
zhiqiang21 opened this issue Sep 25, 2017 · 0 comments
Open

axios知识点总结_20170925 #42

zhiqiang21 opened this issue Sep 25, 2017 · 0 comments

Comments

@zhiqiang21
Copy link
Owner

zhiqiang21 commented Sep 25, 2017

概要

最近的一个项目中使用了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会遇到的问题。官方推荐的polyfillurl-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>

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant