axios使用心得总结

Lowky 发布于2019-08-21 17:50 / 2116人阅读

摘要：最近项目中使用也遇到了一些问题，就借此机会总结一下，如有错误，还请不吝指正。而在使用时对应的传参使用的是，是作为请求体发送的，同样使用这种形式的还有等请求方式。层在环境中可以使用。

Axios是一个基于Promise的 HTTP 库，可以用在浏览器和node.js 中，因为尤大大的推荐，axios也变得越来越流行。最近项目中使用axios也遇到了一些问题，就借此机会总结一下，如有错误，还请不吝指正。

功能

浏览器端发起XMLHttpRequests请求

node层发起http请求

支持Promise API

拦截请求和响应

转换请求和响应数据

取消请求

自动转换JSON数据

客户端支持防御XSRF（跨站请求伪造）

兼容

使用

npm

npm install axios

bower

bower install axios

cdn

发起请求

GET

axios.get("/user?ID=123")
    .then( res => {
         // 请求数据成功并返回数据。
        console.info(res)
    }).catch( e => {
        if(e.response){
        //请求已发出，服务器返回状态码不是2xx。
            console.info(e.response.data)
            console.info(e.response.status)
            console.info(e.response.headers)
        }else if(e.request){
            // 请求已发出，但没有收到响应
            // e.request 在浏览器里是一个XMLHttpRequest实例，
            // 在node中是一个http.ClientRequest实例
            console.info(e.request)
        }else{
            //发送请求时异常，捕捉到错误
            console.info("error",e.message)
        }
        console.info(e.config)
    })
// 等同以下写法
axios({
    url: "/user",
    method: "GET",
    params: {
        ID: 123
    }
}).then( res => {
    console.info(res)
}).catch( e => {
    console.info(e)
})

POST

axios.post("/user", {
    firstName: "Mike",
    lastName: "Allen"
}).then( res => {
    console.info(res)
}).catch( e => {
    console.info(e)
})
// 等同以下写法
axios({
    url: "/user",
    method: "POST",
    data: {
        firstName: "Mike",
        lastName: "Allen"
    }
}).then( res => {
    console.info(res)
}).catch( e => {
   console.info(e)
})

注意事项

在使用GET方法传递参数时使用的是params，并且官方文档中介绍为：params are the URL parameters to be sent with the request. Must be a plain object or a URLSearchParams object。译为：params作为URL链接中的参数发送请求，且其必须是一个plain object或者是URLSearchParams object。plain object（纯对象）是指用JSON形式定义的普通对象或者new Object()创建的简单对象；而URLSearchParams object指的是一个可以由URLSearchParams接口定义的一些实用方法来处理 URL 的查询字符串的对象，也就是说params传参是以/user?ID=1&name=mike&sex=male形式传递的。

而在使用POST时对应的传参使用的是data，data是作为请求体发送的，同样使用这种形式的还有PUT,PATCH等请求方式。有一点需要注意的是，axios中POST的默认请求体类型为Content-Type:application/json（JSON规范流行），这也是最常见的请求体类型，也就是说使用的是序列化后的json格式字符串来传递参数，如：{ "name" : "mike", "sex" : "male" }；同时，后台必须要以支持@RequestBody的形式接收参数，否则会出现前台传参正确，后台接收不到的情况。
如果想要设置类型为Content-Type:application/x-www-form-urlencoded（浏览器原生支持），axios提供了两种方式，如下：

浏览器端

const params = new URLSearchParams();
params.append("param1", "value1");
params.append("param2", "value2");
axios.post("/user", params);

不过，并不是所有浏览器都支持URLSearchParams，兼容性查询caniuse.com，但是这里有一个Polyfill (polyfill:用于实现浏览器并不支持的原生API的代码，可以模糊理解为补丁，同时要确保polyfill在全局环境中)。
或者，你也可以用qs这个库来格式化数据。默认情况下在安装完axios后就可以使用qs库。

const qs = require("qs");
axios.post("/user", qs.stringify({"name":"mike"}));

node层

在node环境中可以使用querystring。同样，也可以用qs来格式化数据。

const querystring = require("querystring");
axios.post("http://something.com/", querystring.stringify({"name":"mike"}));

补充

常见的请求体类型还有一种方式，即multipart/form-data（浏览器原生支持），也就是提交表单数据常用的一种格式。和x-www-form-urlencoded对比起来，后者则是数据被编码成以 "&" 分隔的键-值对, 同时以 "=" 分隔键和值。非字母或数字的字符会被Percent-encoding（URL encoding），这也就是为什么这种类型不支持二进制数据的原因 (应使用 multipart/form-data 代替)。

END

本文只是总结了axios中一些常用的知识点，也是本人平时在开发中遇到过的问题，所以还有些node层的应用以及其他使用场景没有涉及到，更详细的配置请移步axios官方文档，另，推荐一篇翻译不错的中文文档axios译。

云服务器服务器托管使用心得使用心得与技巧阿里云使用心得橙云vps使用心得

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

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

基于vue项目的知识总结

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

tianlai 2019-08-29 14:07 评论0 收藏0
关于本体自动构建goldminner的bug心得

摘要：一项目地址该项目的量只有，能不用的尽量别用，太费劲了。该问题解决方式如下的，这个解决来自，需要注意的是在以上的版本，需要替换成。与的解决办法是在里加和里加变量，这个网上很多，就不赘述。不生成的公理类型必须设置为。一.项目地址https://github.com/dfleischha...该项目的fork量只有2，能不用的尽量别用，太费劲了。二.marven踩坑1.Could not ...

xuxueli 2019-08-19 11:41 评论0 收藏0
搭建基于react项目的心得

摘要：在项目开始之前，不能心急立刻去搭建，需要设定几个步骤来开展，接下来大概的说一下我从技术选型到项目前端搭建好的整个生命周期。开发该项目的底层的内容远不止这些，但由于公司制度规定，只能大概的阐述了在从接手到选型到搭建完毕这到的过程的做法和思考。前段时间部门要基于一个系统的基础上开发一个管理平台，于是我接手了该平台的重活，因为上一个平台我用了vue搭建，所以这次想用react来搭建。在项目...

Barrior 2019-08-22 18:14 评论0 收藏0
基于React的仿QQ音乐（移动端）

摘要：学习成本很低，另外官方有比较完善的中文文档。简单本身是没有错误，一个东西能以简单的方式解决难道不好吗关于这个中文文档居然还有人喷那些喜欢用的是不是英文能力差，我就再报以呵呵一笑。本身拥有中文文档就是一个优势，结果还成了被喷的地方。前言由于这段时间工作上也是挺忙的，就没有时间去写这个项目，中间一直都是写写停停，进度也是非常慢的。正好前几天都还比较空，就赶紧抓着空闲时间去写这个项目，最...

xiaodao 2019-08-21 16:41 评论0 收藏0