vue axios使用,vue-axios详细介绍
Axios是基于Promise的浏览器和nodejs的HTTP客户端。下面这篇文章主要介绍你如何在三分钟内快速学会Axios在vue项目中的基本用法。通过示例代码非常详细的介绍，有需要的朋友可以参考一下。
目录
axios 1简介。axios是干什么的2。安装和使用。axios请求方法1。axios请求方法：2。get请求3、post请求4、put和patch请求5、delete请求6、并发请求4、axios实例1、创建axios实例2、Axios全局配置3、Axios实例配置4、Axios请求配置V、拦截器1、请求拦截器2、响应拦截器3、取消拦截VI、错误处理VII、取消请求结论提示：本文详细讲解了vue项目中Axios的例子。使用Vue.js框架开发前端项目时，经常会发送ajax请求服务器接口。在开发过程中，axios需要进一步封装，以便于在项目中使用。
Axios简介
axios框架的全称(AjaxI/osystem):
基于Promise的浏览器和node.js的http客户端，所以可以使用Promise API。
一、axios是干啥的
说到axios，就不得不说Ajax。当旧的浏览器页面向服务器请求数据时，页面会因为返回整个页面的数据而被强制刷新，对用户不是很友好。而且我们只需要修改页面的部分数据，但是服务器发来的数据是整个页面，很消耗网络资源。而我们只需要修改页面的一些数据，也希望不要刷新页面，于是异步网络请求应运而生。
Ajax(异步JavaScript和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安装axios
鲍尔装置
鲍尔安装axios
通过cdn引入
script src= https://UNP kg . com/axios/dist/axios . min . js /script
将axios引入vue项目的main.js文件
从“axios”导入axios
Vue.prototype.$axios=axios
在组件中使用axios
脚本
导出默认值{
已安装(){
这个。$axios.get(/goods.json )。然后(res={
console . log(RES . data)；
})
}
}
/脚本
三、Axios请求方式
1、axios可以请求的方法：
Get:获取数据，请求指定信息，返回实体对象post:向指定资源提交数据(如表单提交或文件上传)put:更新数据，客户端传输到服务器的数据替换指定文档的内容。patch: update data是put方法的补充，用于本地更新已知资源。删除：请求服务器删除指定的数据。
2、get请求
示例代码
方法一
//请求格式类似于http://localhost:8080/goods.json？id=1
这个。$axios.get(/goods.json ，{
参数：{
id:1
}
}).然后(res={
console . log(RES . data)；
}，错误={
console . log(err)；
})
方法2
这个。$axios({
方法：“get”，
网址：/goods.json ，
参数：{
id:1
}
}).然后(res={
console . log(RES . data)；
}，错误={
console . log(err)；
})
3、post请求
发布请求通常分为两种类型
1 . form-数据表单提交，在上传图片和文件时广泛使用。
2.application/json通常用于ajax异步请求
示例代码
方法一
这个. axios.post(/url ，{
id:1
}).然后(res={
控制台。日志(研究数据)；
},错误={
控制台。日志(错误)；
})
方法二
$axios({
方法： post ，
URL:“/URL”，
数据：{
id:1
}
}).然后(res={
控制台。日志(研究数据)；
},错误={
控制台。日志(错误)；
})
表单数据请求
let data={
//请求参数
}
let FormData=new FormData()；
对于（输入数据){
formdata.append(key，data[key])；
}
这个axios.post(/goods.json ，formdata).然后(res={
控制台。日志(研究数据)；
},错误={
控制台。日志(错误)；
})
4、put和patch请求
示例代码
放请求
这个. axios.put(/url ，{
id:1
}).然后(res={
控制台。日志(研究数据)；
})
修补请求
这个. axios.patch(/url ，{
id:1
}).然后(res={
控制台。日志(研究数据)；
})
5、delete请求
示例代码
参数以明文形式提交
这个. axios.delete(/url ，{
参数：{
id:1
}
}).然后(res={
控制台。日志(研究数据)；
})
参数以封装对象的形式提交
这个. axios.delete(/url ，{
数据：{
id:1
}
}).然后(res={
控制台。日志(研究数据)；
})
//方法二
axios({
方法："删除",
URL:“/URL”，
参数：{ id:1 }，//以明文方式提交参数
数据：{ id:1 } //以封装对象方式提交参数
}).然后(res={
控制台。日志(研究数据)；
})
6、并发请求
并发请求：同时进行多个请求，并统一处理返回值
示例代码
这个. axios.all([
这个. axios.get(/goods.json )，
这个. axios.get(/classify.json )
]).然后（
这个axios.spread((goodsRes，classifyRes)={
控制台。日志(goodsres。数据)；
控制台。日志(分类研究数据)；
})
)
四、Axios实例
1、创建axios实例
示例代码
让实例=这个. axios.create({
baseURL:"http://localhost:9090 "，
超时：2000
})
instance.get(/goods.json ).然后(res={
控制台。日志(研究数据)；
})
可以同时创建多个爱可信实例。
爱可信实例常用配置：
基础地址请求的域名，基本地址，类型：Stringtimeout请求超时时长，单位ms，类型：数字全球资源定位器(Uniform Resource Locator)请求路径，类型：Stringmethod请求方法，类型：字符串头设置请求头，类型：对象参数请求参数，将参数拼接在统一资源定位器上，类型：对象数据请求参数，将参数放到请求体中，类型：对象
2、axios全局配置
示例代码
//配置全局的超时时长
这个100美元axios。默认值。超时=2000；
//配置全局的基本统一资源定位器
这个100美元axios。默认值。基本URL= http://localhost:8080 ；
3、axios实例配置
示例代码
让实例=这个100美元axios。create()；
实例。默认值。超时=3000；
4、axios请求配置
示例代码
这个. axios.get(/goods.json ，{
超时：3000
}).然后()
以上配置的优先级为：请求配置 实例配置 全局配置
五、拦截器
拦截器：在请求或响应被处理前拦截它们
1、请求拦截器
示例代码
这个100美元axios。截击机。请求。使用(配置={
//发生请求前的处理
返回配置
},错误={
//请求错误处理
返回保证。拒绝(err)；
})
//或者用爱可信实例创建拦截器
假设实例=$ axios。create()；
实例。截击机。请求。使用(配置={
返回配置
})
2、响应拦截器
示例代码
这个100美元axios。截击机。回应。使用(RES={
//请求成功对响应数据做处理
return res //该返回对象会传到请求方法的响应对象中
},错误={
//响应错误处理
返回保证。拒绝(err)；
})
3、取消拦截
示例代码
让实例=这个100美元axios。截击机。请求。使用(配置={
config.headers={
令牌：""
}
返回配置
})
//取消拦截
这个100美元axios。截击机。请求。弹出(实例);
六、错误处理
示例代码
这个. axios.get(/url ).然后(res={
}).接住(错误={
//请求拦截器和响应拦截器抛出错误时，返回的犯罪对象会传给当前函数的犯罪对象
控制台。日志(错误)；
})
七、取消请求
示例代码
让来源=这个.$axios .取消令牌。source()；
这个. axios.get(/goods.json ，{
取消令牌：来源
}).然后(res={
console.log(res)
}).接住(错误={
//取消请求后会执行该方法
console.log(错误)
})
//取消请求，参数可选，该参数信息会发送到请求的捕捉中
source.cancel(取消后的信息);
结语
这篇关于axios在vue项目中的基本用法的文章到此为止。想了解更多关于axios在vue项目中的基本用法，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。