axios使用知识点总结
2017-09-25 19:12
573 查看
概要
最近的一个项目中使用了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>
扩展POST请求提交数据的方式
相关文章推荐
- android知识点总结 包括数据库的使用 listview适配 contextmenu的使用 和 contentprovider使用
- html使用自我知识点总结
- 自定义视图、使用视图控制器知识点总结
- mysql使用知识点总结
- 使用中总结的Git知识点
- java的各种使用小知识点总结。
- WPF使用中知识点总结二
- 总结一下使用Swift遇到的几个小问题和几个小知识点
- AIC23使用过程中总结的知识点
- Memcached使用总结之:Memcache知识点梳理
- C++ const关键字的使用知识点总结
- git的使用知识点总结(一)
- git的使用知识点总结(二)
- mysql使用知识点总结
- 知识点总结: c#,使用自定义类型来作为Dictionary的Key
- Linux C语言编程-Linux网络通信--Linux上使用curl来发送Http协议的报文---知识点总结+实例d
- Objective-C在IOS中的一些使用知识点总结
- 使用html5中video自定义播放器必备知识点总结以及JS全屏API介绍
- Servlet第二章知识点总结——使用 Servlet处理表单
- 【S2第二学期-使用JSP/Servlet技术开发新闻发布系统】全书知识点总结