axios简述及vue中使用axios（详）

文章目录

axios 简述axios 对比与ajax优缺点 axios 的使用axios的安装axios的使用常规使用axios APIaxios的并发（axios.all,axios.spread） 请求方法别名 传值常见的问题 总结 要想学会一个东西，先深刻了解这个东西才是最重要的！！！ axios是通过promise实现对ajax技术的一种封装,类似与jQuery对ajax的封装一样，但是我们使用vue开发单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务）不推荐！！！

axios 简述

axios 其实是封装后的ajax，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范。 axios 具有的特性: 1.从浏览器中创建 XMLHttpRequest 2.支持 Promise API 3.客户端支持防止CSRF 4.提供了一些并发请求的接口（重要，方便了很多的操作） 5.从 node.js 创建 http 请求 6.拦截请求和响应 7.转换请求和响应数据 8.取消请求 9.自动转换JSON数据 PS:防止CSRF:简单的来说就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略。更多的可以看这篇文章详情

---

axios 对比与ajax

ajax 代码片段:

$.ajax({ url:'/frontMenu', type:'post', dataType:'json',//xml,html,script,jsonp,text类型 data:{ menuName:this.menuName //按具体模块是否需要传参 }, success:function(response){ console.log(response) } })

(ajax实现了网页局部数据的刷新) axios 代码片段(这里我用的axios API):

axios({ url:'/frontMenu', method:'post', responseType:'json',//默认为json， data:{ menuName:this.menuName //按具体模块是否需要传参 } }) .then(funtion(response){ console.log(response) }) .catch(function(error){ console.log(error) })

补充一下axios的responseType:

值(responseType)数据类型’ ’DOMStringarraybufferArrayBuffer对象(类型化数组)blobBlob对象（存放二进制数据外还可以设置这个数据的MINE类型）documentDocument对象jsonJavaScript object,parsed from a JSON string returned by the servertextDOMString

优缺点

ajax: 1.ajax主要针对的是MVC的编程模式,对于如今的前端的MVVC框架仍有所欠缺 2.基于原生的XHR开发，XMR本身的架构不太清晰，虽然已经有fetch(但是axios已经帮我们封装的足够方便了为什么我们还要花费大量力气去学习fetch而且fetch使用起来并不是那么舒服，需要进行封装。)

axios就是上方提到的特性啦，而且其提供了并发的封装以及体积小呀

ps:至于fetch 使用的是ES6中的promise对象,并且是基于promise进行设计的 但它不是ajax的封装而是原生的js，并没有使用XMLHttpBequest对象。

---

讲到这里大家是不是就很想知道具体项目中如何去使用axios呢 （๑￫‿ฺ￩๑）

axios 的使用

Vue 原本有一个官方推荐的 ajax 插件 vue-resource，但是自从 Vue 更新到 2.0 之后，官方就不再更新 vue-resource，所有目前主流的 Vue 项目，都选择 axios 来完成 ajax 请求

axios的安装

引入axios 在对应的文件目录下npm install --save axios vue-axios 或 使用cdn: <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

法一（修改原型链）： 在mian文件里面

import axios from 'axios' Vue.prototype.$axios = axios //改变

在组件使用的时候

that.$axios .post("/frontMenu",{ menuName:this.menuName //按具体模块是否需要传参 }) .then(response => { console.log(response) }) .catch(function(error) { console.log(error) });

法二（结合vue-axios） vue-axios是按照vue插件的方式去写的。那么结合vue-axios，就可以去使用vue.use方法了 在main文件里

import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios,axios);

组件中使用

this.axios.post('/frontMenu',{ menuName:this.menuName //按具体模块是否需要传参 }) .then((response)=>{ console.log(response) }).catch((response)=>{ console.log(error) });

axios的使用

常规使用

this.axios.post('/frontMenu',{ menuName:this.menuName //按具体模块是否需要传参 }) .then((response)=>{ console.log(response) }).catch((response)=>{ console.log(error); })

ps:get方法,把post换成get就好啦 这里就不单独列出了

axios API

可以通过向 axios 传递相关配置来创建请求。

this.axios({ method:'post', url:'/frontMenu', data:{ menuName:this.menuName //按具体模块是否需要传参 }, //修改请求头 headers: { "Content-Type": "application/x-www-form-urlencoded" } }) .catch(function(error) { console.log(error) });

请求头用法

1.Content-Type: application/json 这种是axios默认的请求数据类型，我们只需将参数序列化json字符串进行传递即可， 无需多余的配置 2.Content-Type: multipart/form-data <input>元素的type属性必须为file 3.Content-Type:application/x-www-form-urlencoded 请求体中的数据会以普通表单形式（键值对）发送到后端

axios的并发（axios.all,axios.spread）

let axiosList=[ axios.get('url1',{params:xxx,dateType:'JSON'}), axios.get('url2',{params:xxx,dateType:'TEXT'}), ] axios.all(axiosList).then(axios.spread(function(res1,res2){ console.log(res1,res2)//分别是两个请求的返回值 })

请求方法别名

axios.request(config) axios.get(url[, config]) axios.delete(url[, config]) axios.head(url[, config]) axios.post(url[, data[, config]]) axios.put(url[, data[, config]]) axios.patch(url[, data[, config]]) ps：在使用别名方法时， url、method、data 这些属性都不必在配置中指定。

传值常见的问题

1.前台传递的时候为键值对，后台难接到 解决方案：使用axios自带的qs库对参数序列化 在需要用的组件中先引入 import Qs from "qs"; 对参数进行序列化

let data= Qs.stringify({ userName:this.userName, passWord:this.passWord }) this.axios({ method:'post', url:'/frontMenu', data:data }) .then((response)=>{ console.log(response) }) .catch(function(error) { console.log(error) });

console.log(data) 结果:userName=哈哈哈哈&&passWord=1234567 完美解决问题 (ฅ´ω`ฅ) 补充：

qs.parse()将URL解析成对象的形式

那当我们需要传递数组的时候，我们可以通过下面方式进行处理： 默认情况下，它们给出明确的索引，如下代码： qs.stringify({ a: [‘b’, ‘c’, ‘d’] }); // ‘a[0]=b&a[1]=c&a[2]=d’ 也可以进行重写这种默认方式为false qs.stringify({ a: [‘b’, ‘c’, ‘d’] }, { indices: false }); // ‘a=b&a=c&a=d’ 当然，也可以通过arrayFormat 选项进行格式化输出，如下代码所示： qs.stringify({ a: [‘b’, ‘c’] }, { arrayFormat: ‘indices’ }) // ‘a[0]=b&a[1]=c’ qs.stringify({ a: [‘b’, ‘c’] }, { arrayFormat: ‘brackets’ }) // ‘a[]=b&a[]=c’ qs.stringify({ a: [‘b’, ‘c’] }, { arrayFormat: ‘repeat’ }) // ‘a=b&a=c’

2.上传图片 解决方案：需要更改请求头并用表单提交

uploadFile(file) { this.formDate.append("file", file.file); }, submitUpload() { this.formDate = new FormData(); let config = { headers: { "Content-Type": "multipart/form-data" } }; that.axios .post("/api/pictureUpload", this.formDate, config) .then(response => { console.log(response); }) .catch(response => { console.log(response); }); }

ps:我用的是element-ui中的图片上传控件

总结

axios的选择符合当前前端开发的潮流，并且体积小易上手。至于更多关于axios配置的介绍留在以后吧(๑˘ ˘๑)。本文阐述了axios以及axios的基本用法，还有axios+vuex封装的用法以后会出的！！！

本文略显臃肿谢谢大家观看 ꒰๑´•.̫ • `๑꒱