axios知识点总结

iOS122 发布于2019-08-21 16:45 / 976人阅读

摘要：概要最近的一个项目中使用了来代替来发送请求。在使用这两种方式的时候可以注意一下，防止多一次造成后端接受参数错误。而且它的请求返回的是一个对象。我可以很方便的处理请求的结果。或者是使用来对进行编码。说明中是这样描述的。

概要

最近的一个项目中使用了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标签的底部

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

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

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

ES6的写法

import "url-search-params-polyfill";

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

云服务器 GPU云服务器 linux数据结构知识点总结位段知识总结 axios axios cdn

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88675.html

axios使用心得总结

摘要：最近项目中使用也遇到了一些问题，就借此机会总结一下，如有错误，还请不吝指正。而在使用时对应的传参使用的是，是作为请求体发送的，同样使用这种形式的还有等请求方式。层在环境中可以使用。 Axios是一个基于Promise的 HTTP 库，可以用在浏览器和node.js 中，因为尤大大的推荐，axios也变得越来越流行。最近项目中使用axios也遇到了一些问题，就借此机会总结一下，如有错误，...

Lowky 2019-08-21 17:50 评论0 收藏0
前端知识点总结——VUE（持续更新中）

摘要：前端知识点总结持续更新中框架和库的区别框架有着自己的语法特点都有对应的各个模块库专注于一点框架的好处提到代码的质量，开发速度提高代码的复用率降低模块之间的耦合度高内聚低耦合思维模式的转换从操作的思维模式切换到以数据为主概述是一个渐进式的构建前端知识点总结——VUE（持续更新中） 1.框架和库的区别：框架：framework 有着自己的语法特点、都有对应的各个模块库 library ...

big_cat 2019-08-22 14:50 评论0 收藏0
Vue.js中前端知识点总结笔记

摘要：框架和库的区别框架有着自己的语法特点都有对应的各个模块库专注于一点框架的好处提到代码的质量，开发速度提高代码的复用率降低模块之间的耦合度高内聚低耦合思维模式的转换从操作的思维模式切换到以数据为主概述是一个渐进式的构建用户界面的框架小到的简单1.框架和库的区别：框架：framework 有着自己的语法特点、都有对应的各个模块库 library 专注于一点框架的好处： 1.提到代码的质...

番茄西红柿 2019-04-23 13:42 评论0 收藏0
基于vue项目的知识总结

摘要：前言用有一段时间了，从用搭建项目一步步配置，到之后的研究动效这些，一直想写些东西记录一下做个总结，刚好趁着有空就整理一下。结语有新的知识点会更新到知识体系中，总结和心得体会会单独写文章详述，努力填坑前言用vue有一段时间了，从用vue-cli搭建项目、一步步配置axios、vuex、vue-router，到之后的研究canvas、动效这些，一直想写些东西记录一下、做个总结，刚好趁着...

tianlai 2019-08-29 14:07 评论0 收藏0
element 上传组件 el-upload 的经验总结

摘要：正文上传图片到七牛云这个需要前后端的配合才能实现，这里是官方的参考链接。参考链接组件的怎么获取进度值谷歌找到的其一谷歌找到的其二完前言最近在做后台管理项目，采用的 vue-element-admin ，上传图片是一个很常用的功能，也遇到了很多问题，刚好趁此机会做一些总结。初步总结下会提到的问题，目录如下： el-upload 自定义上传方法图片上传到七牛云图片压缩后再上传（...

Neilyo 2019-08-26 10:24 评论0 收藏0