广告：宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取~~~
提示：本篇详解axios在Vue项目中的实例。在使用Vue.js框架开发前端项目时，会经常发送ajax请求服务端接口，在开发过程中，需要对axios进一步封装，方便在项目中的使用。【学习视频分享：vue视频教程、web前端视频】
Axios简介axios框架全称（ajax – I/O – system）：
基于promise用于浏览器和node.js的http客户端，因此可以使用Promise API一、axios是干啥的说到axios我们就不得不说下Ajax。在旧浏览器页面在向服务器请求数据时，因为返回的是整个页面的数据，页面都会强制刷新一下，这对于用户来讲并不是很友好。并且我们只是需要修改页面的部分数据，但是从服务器端发送的却是整个页面的数据，十分消耗网络资源。而我们只是需要修改页面的部分数据，也希望不刷新页面，因此异步网络请求就应运而生。
Ajax(Asynchronous JavaScript and XML)： 异步网络请求。Ajax能够让页面无刷新的请求数据。
实现ajax的方式有多种，如jQuery封装的ajax，原生的XMLHttpRequest，以及axios。但各种方式都有利弊：
原生的XMLHttpRequest的配置和调用方式都很繁琐，实现异步请求十分麻烦jQuery的ajax相对于原生的ajax是非常好用的，但是没有必要因为要用ajax异步网络请求而引用jQuery框架Axios（ajax i/o system）： 这不是一种新技术，本质上还是对原生XMLHttpRequest的封装，可用于浏览器和nodejs的HTTP客户端，只不过它是基于Promise的，符合最新的ES规范。具备以下特点：
在浏览器中创建XMLHttpRequest请求在node.js中发送http请求支持Promise API拦截请求和响应转换请求和响应数据取消要求自动转换JSON数据客户端支持防止CSRF/XSRF(跨域请求伪造)
二、安装使用安装有三种方式：
npm安装
npm install axios登录后复制
bower安装
bower install axios登录后复制
通过cdn引入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>登录后复制
在vue项目的main.js文件中引入axios
import axios from 'axios'Vue.prototype.$axios = axios登录后复制
在组件中使用axios
<script>export default {mounted(){this.$axios.get('/goods.json').then(res=>{console.log(res.data);})}}</script>登录后复制三、Axios请求方式1、axios可以请求的方法：
get：获取数据，请求指定的信息，返回实体对象post：向指定资源提交数据（例如表单提交或文件上传）put：更新数据，从客户端向服务器传送的数据取代指定的文档的内容patch：更新数据，是对put方法的补充，用来对已知资源进行局部更新delete：请求服务器删除指定的数据2、get请求
示例代码
方法一
//请求格式类似于 http://localhost:8080/goods.json?id=1this.$axios.get('/goods.json',{ params: { id:1 }}).then(res=>{console.log(res.data);},err=>{console.log(err);})登录后复制 方法二
this.$axios({method: 'get',url: '/goods.json', params: { id:1 }}).then(res=>{console.log(res.data);},err=>{console.log(err);})登录后复制3、post请求
post请求一般分为两种类型
1、form-data 表单提交，图片上传、文件上传时用该类型比较多 2、application/json 一般是用于 ajax 异步请求
示例代码
方法一
this.$axios.post('/url',{id:1}).then(res=>{console.log(res.data);},err=>{console.log(err);})登录后复制 方法二
$axios({method: 'post',url: '/url',data: {id:1}}).then(res=>{console.log(res.data);},err=>{console.log(err);})登录后复制form-data请求
let data = {//请求参数}let formdata = new FormData();for(let key in data){formdata.append(key,data[key]);}this.$axios.post('/goods.json',formdata).then(res=>{console.log(res.data);},err=>{console.log(err);})登录后复制4、put和patch请求
示例代码
put请求
bower install axios0登录后复制
patch请求
bower install axios1登录后复制
5、delete请求
示例代码
参数以明文形式提交
bower install axios2登录后复制
参数以封装对象的形式提交
bower install axios3登录后复制
6、并发请求
并发请求：同时进行多个请求，并统一处理返回值
示例代码
bower install axios4登录后复制四、Axios实例
1、创建axios实例
示例代码
bower install axios5登录后复制
可以同时创建多个axios实例。 axios实例常用配置：
baseURL 请求的域名，基本地址，类型：Stringtimeout 请求超时时长，单位ms，类型：Numberurl 请求路径，类型：Stringmethod 请求方法，类型：Stringheaders 设置请求头，类型：Objectparams 请求参数，将参数拼接在URL上，类型：Objectdata 请求参数，将参数放到请求体中，类型：Object2、axios全局配置
示例代码
bower install axios6登录后复制
3、axios实例配置
示例代码
bower install axios7登录后复制
4、axios请求配置
示例代码
bower install axios8登录后复制
以上配置的优先级为：请求配置 > 实例配置 > 全局配置
五、拦截器拦截器：在请求或响应被处理前拦截它们
1、请求拦截器
示例代码
bower install axios9登录后复制
2、响应拦截器
示例代码
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>0登录后复制
3、取消拦截
示例代码
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>1登录后复制六、错误处理
示例代码
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>2登录后复制七、取消请求
示例代码
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>3登录后复制
（学习视频分享：web前端开发、编程基础视频）
以上就是一文聊聊vue项目中怎么使用axios？基本用法分享的详细内容，更多请关注9543建站博客其它相关文章！
发表评论