axios在vue中的使用慕课笔记,vue-axios是什么
本文主要介绍了axios在vue中的使用方法，具有很好的参考价值。希望对你有帮助。如有错误或不足之处，请不吝赐教。
:
目录
1.什么是Axios 2。Axios 3 12有什么特点。Axios浏览器支持4。安装1。使用npm2 3。使用cdn 5。用法(vue项目已建)1。Axios 2的基本用法。Axios 3的高级用法。Axios的进一步封装。
一、Axios是什么
Axios是一个基于promise的HTTP库(类似jQuery的Ajax，用于HTTP请求)，可以用于浏览器和node.js(既可以用于客户端，也可以用于node.js编写的服务器)。
二、Axios有哪些特性
支持promise API拦截请求和响应，转换请求数据和响应数据，取消请求，自动转换JSON数据，支持XSRF防御。
三、Axios浏览器支持
四、安装
1.使用 npm
$ npm安装axios
2.使用 bower
$ bower安装axios
3.使用 cdn
script src= https://UNP kg . com/axios/dist/axios . min . js /script
五、用法（vue项目已搭建）
1. Axios基础用法
（get、post、put 等请求方法）
一、Axios常用的请求方法有哪些：get、post、put、patch、delete？
Get:(一般用于)获取数据post:提交数据(上传表单提交文件)put:更新(或编辑)数据(将所有数据推送到后端(或服务器端))patch:更新数据(仅将修改后的数据推送到后端)delete:删除数据题外话，一般公司在实际开发项目过程中：
(1)post:一般用于新建。
(2)put:一般用于更新(适合数据较少的更新)
(3)补丁：一般用于大数据量；如果一个表单有大量数据和许多条目，那么一次推送所有数据会消耗更多的性能。这时候可以考虑用patch只把修改过的数据推送到后端。
这些题外话只是一般的、约定俗成的用法，并不意味着一定要这么用。当然你可能会说我用post来获取数据好吗？当然这也行，绝对没问题！具体怎么用或者和前后端讨论决定，避免不愉快的肢体冲突！
哈哈，是认真的，开玩笑的！
（1）get 请求
模板
差异
divmmmm/div
/div
/模板
脚本
从“axios”导入axios
//获取请求
导出默认值{
名称：获取，
已创建(){
//第一个写方法叫做get alias request方法。
//http://localhost:8080/static/data . JSON？id=1
axios.get(././static/data.json ，{
Params: {//如果有参数，如果没有参数，就省略不写。
id: 1
}
}).然后((res)={
Console.log (data:，RES)；
})
//第二种写法
axios({
方法：“get”，
url:././static/data.json ，
参数：{
id: 1
}
}).然后((res)={
Console.log (data:，res)
})
}
}
/脚本
样式范围
/风格
让我们看看请求信息-
代码：304未修改-304是重定向；一般情况下，第一次访问接口时，所有返回都是200；第二次访问界面时，如果数据没有发生变化，那么浏览器会自动识别并返回一个状态304，表示数据没有发生变化或重定向；相当于重定向到你刚访问过的资源，加载速度会更快！
（2） post 请求
模板
差异
divmmmm/div
/div
/模板
脚本
从“axios”导入axios
//发布请求
导出默认值{
姓名：帖子，
已创建(){
/*
有两种常用的post请求数据格式：
(1)应用程序/json
(2)表单-数据表单提交(图片上传、文件上传)
*/
//第一种编写方法称为post别名请求方法
//http://localhost:8080/static/data . JSON？id=1
//应用程序/JSON请求
let data={
id: 1
}
axios.post(././static/data.json ，数据)。然后((res)={
Console.log (data:，RES)；
})
//第二种写法
axios({
方法： post ，
url:././static/data.json ，
数据：数据，
}).然后((res)={
Console.log (data:，res)
})
//表单数据请求
假设表单数据=新表单数据()
对于（输入数据){
formData.append(key，data[key])
}
axios.post(././static/data.json ，formData)。然后((res)={
console.log(数据：，RES)；
})
}
}
/脚本
样式范围
/风格
了解一下，发布两种请求方式的内容类型和参数有哪些不同-
应用程序/json:如下图
表单数据：如下图
（3）put、patch 请求
说明一下，放和修补请求与邮政请求用法一样类似，同样有应用/json和表单数据，为了节省时间就不过多赘述了，简单写一下！
模板
差异
divmmmm/div
/div
/模板
脚本
从" axios "导入爱可信
//上传、修补请求
导出默认值{
名称：放，贴，
已创建(){
let data={
id: 1
}
//上传请求
axios.put(././static/data.json ，数据)。然后((res)={
console.log(数据：，RES)；
})
//补丁请求
axios.patch(././static/data.json ，数据)。然后((res)={
console.log(数据：，RES)；
})
}
}
/脚本
样式范围
/风格
（4）delete 请求
删除请求与前四种请求稍有一点不同：删除请求有时候需要把参数拼接到统一资源定位器上，有时候像邮政请求那样把参数放在请求体里面。至于具体怎么调用，需要和后端商量好！
模板
差异
divmmmm/div
/div
/模板
脚本
从" axios "导入爱可信
//删除请求
导出默认值{
名称：删除，
已创建(){
//删除请求
axios.delete(././static/data.json ，{
参数：{//把参数拼接到统一资源定位器上
id: 1
}
})。然后((res)={
console.log(数据：，RES)；
})
axios.delete(././static/data.json ，{
数据：{//把参数改成数据，把参数放在请求体里面
id: 1
}
})。然后((res)={
console.log(数据：，RES)；
})
//不用别名方法
axios({
方法："删除",
url:././static/data.json ，
//params: {id: 1}，//把参数拼接到统一资源定位器上
数据：{id: 1}//把参数放在请求体里面
}).然后((res)={
console.log(数据：，res)
})
}
}
/脚本
样式范围
/风格
了解一下，把参数拼接到统一资源定位器上和放在请求体里面有什么不同-
参数（把参数拼接到统一资源定位器上),如下图：
数据（把参数放在请求体里面),如下图：
（5）并发请求
并发请求：同时进行多个请求，并统一处理返回值。
模板
差异
divmmmm/div
/div
/模板
脚本
从" axios "导入爱可信
//并发请求
导出默认值{
名称：获取，
已创建(){
//并发请求用到了爱可信的两个方法：axios.all(参数是一个数组)、axios.spread(回调函数)
axios.all([
axios.get(././static/data.json )，
axios.get(././静态/城市。JSON’)
]).然后(axios.spread((dataRes，cityRes)={
console.log(数据资源、城市资源)
}))
}
}
/脚本
样式范围
/风格
2. Axios进阶用法
（实例、配置、拦截器、取消请求等）
（1）axios实例和配置
模板
差异
divmmmm/div
/div
/模板
脚本
从" axios "导入爱可信
//axios实例
//后端接口地址有多个，并且超时时长不一样
导出默认值{
名称：获取，
已创建(){
//创建爱可信实例
let instance=axios.create({//参数配置
baseURL: http://localhost:8080 ，//请求的域名（或基本地址)
超时：3000,//请求的超时时长（默认：1000毫秒（毫秒),超过这个时长会报401超时)
//url:././static/data.json ，//请求的路径
//方法： get ，//请求方法
标题：{//设置请求头（给请求头添加一些参数)
令牌：""
},
//params: {id: 1}，//请求参数拼接在统一资源定位器上
//data: {id: 1}//请求参数放在请求体
})
instance.get(././static/data.json ，{
参数：{
id: 1
}
})。然后((res)={
console.log(res)
})
//假如有两个域名或设置超时时长不一样，你可以再创建一个爱可信实例
let instance2=axios.create({
baseURL:"http://localhost:9090 "，
超时：5000
})
instance2.get(././static/data.json ，{
参数：{
id: 1
}
})。然后((res)={
console.log(res)
})
//1.axios全局配置
axios。默认值。基本URL= http://localhost:8080 ；
axios。默认值。超时=3000；
//2.axios实例配置
让instance=axios。create()；
实例。默认值。超时=4000；
//3.axios请求配置
instance.get(././static/data.json ，{
超时：6000
})。然后((res)={
console.log(res)
})
//优先级从低到高：1.axios全局配置2.axios实例配置3.axios请求配置
}
}
/脚本
样式范围
/风格
（2）拦截器
模板
差异
divmmmm/div
/div
/模板
脚本
从" axios "导入爱可信
//拦截器：在请求或响应被处理前拦截它们
//请求拦截器、响应拦截器
导出默认值{
名称：获取，
已创建(){
//请求拦截器
axios。截击机。请求。使用(配置={
//在发送请求前做些什么
返回配置；
},错误={
//在请求错误的时候做些什么
返回保证。拒绝(err)；
})
//响应拦截器
axios。截击机。回应。使用(RES={
//请求成功对响应数据做处理
返回表示留数
},错误={
//响应错误做些什么
返回保证。拒绝(err)；
})
//取消拦截器（了解)
让拦截器=axios。截击机。请求。使用(配置={
config.headers={
验证：正确
}
返回配置；
})
axios。截击机。请求。弹出(拦截器);
//例子：登录状态（令牌：)需要登录的接口
让instance=axios。创建({ })；
实例。截击机。请求。使用(配置={
配置。标题。token=
//config.headers={//这种写法会覆盖掉头球中的其他参数，导致头球中只包含代币这一个参数，所以不建议这种写法
//标记：""
//}
返回配置；
},错误={
返回保证。拒绝(err)；
})
//移动端弹窗
让instance _ phone=axios。创建({ })；
实例_电话。截击机。请求。使用(配置={
$(#modal ).show()；
返回配置；
})
实例_电话。截击机。回应。使用(RES={
$(#modal ).hide()；
返回表示留数
})
}
}
/脚本
样式范围
/风格
3.Axios进一步封装
在项目中的实际应用
在某视频剪辑软件项目中，和后台交互获取数据这块，我们通常使用的是爱可信库，它是基于承诺的超文本传送协议(超文本传输协议的缩写)库，可运行在浏览器端和节点。射流研究…中axios .有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御跨站请求伪造等。
在一个完整的项目中，和服务端的交互会很频繁，一个项目会有很多请求，冗余代码很多。所以将请求封装，统一管理还是很有必要的。
本文介绍的爱可信的封装主要目的就是在帮助我们简化项目代码和利于后期的更新维护。
（1）第一步：src/api/request.js
从" axios "导入爱可信
//从“Vue”导入Vue
//从导入存储区./store ；
//从导入{路由器}./router/index ；
//let VM=new Vue()；
const instance=axios.create({
baseURL:"http://localhost:8080 "，
超时：3000,
//头：{
//发布：{
// Content-Type : application/x-www-form-urlencoded；charset=UTF-8
//}
//}
})
//请求拦截
实例。截击机。请求。使用(配置={
//自定义标题，可添加项目代币
//if (store.state.app.token) {
//config。标题。token=商店。状态。app。token
//config.headers.timestamp=新日期()。getTime()；
//}
返回配置；
},错误={
返回承诺。拒绝(错误);
})
//响应拦截
实例。截击机。回应。使用(response={
//const resCode=response。地位；
//if (resCode===200) {
//返回保证。解决(响应)；
//}其他{
//返回保证。拒绝(回应)；
//}
返回响应；
},错误={
//const resCode=error。回应。地位；
//开关（重新编码){
//案例401:
//vm .$ message。错误(错误。回应。数据。消息)；
//store.commit(logout ，this)；
//存储。提交( clearOpenedSubmenu )；
////console.log(token-0 ，store。状态。app。token)；
//router.replace({
//名称："登录"
//});
//break；
//案例404:
//vm .$Message.error(网络请求不存在);
//break；
//案例500:
//vm .$Message.error(服务器连接错误);
//break；
////其他状态码错误提示
//默认值：
//vm .$ message。错误(错误。回应。数据。消息)；
//}
返回承诺。拒绝(错误);
})
/*
*封装得到方法
*@param{String} url [请求地址]
*@param{Object} params请求参数
*/
导出函数Get(url，params) {
返回新承诺((解决，拒绝)={
instance.get(url，{
参数：参数
}).然后((res)={
解决(研究数据)；
}).接住(错误)={
拒绝(错误。数据)；
})
})
}
/**
*封装邮政方法
*@param{String} url请求地址
*@param{Object} params请求参数
*/
导出函数发布(url，参数){
返回新承诺((解决，拒绝)={
instance.post(url，params).然后((res)={
解决(研究数据)；
}).接住(错误)={
拒绝(错误。数据)；
})
})
}
/**
*封装放方法
*@param{String} url请求地址
*@param{Object} params请求参数
*/
导出函数上传(url，参数){
返回新承诺((解决，拒绝)={
instance.put(url，params).然后((res)={
解决(研究数据)；
}).接住(错误)={
拒绝(错误。数据)；
})
})
}
/**
*封装修补方法
*@param{String} url请求地址
*@param{Object} params请求参数
*/
导出函数补丁(url，参数){
返回新承诺((解决，拒绝)={
instance.put(url，params).然后((res)={
解决(研究数据)；
}).接住(错误)={
拒绝(错误。数据)；
})
})
}
/**
*封装删除方法
*@param{String} url [请求地址]
*@param{Object} params [请求参数]
*/
导出函数删除(url，参数){
返回新承诺((解决，拒绝)={
instance.delete(url，{
参数：参数
}).然后((res)={
解决(研究数据)；
}).接住(错误)={
拒绝(错误。数据)；
})
})
}
（2）第二步：src/api/index.js
从" @/API/请求"导入{Get，Post，Put，Patch，Delete }；
导出默认值{
getListData: (params)={
return Get(././static/data.json ，params)；
},
postListData: (params)={
回帖(././static/data.json ，params)；
},
deleteListData: (params)={
返回删除(././static/data.json ，params)；
}
}
（3）第三步：src/main.js
//要用"导入"命令加载的某视频剪辑软件构建版本
//(仅运行时或独立)已在webpack.base.conf中用别名设置。
从“vue”导入某视频剪辑软件
从导入应用程序 0.5/App
从导入路由器。/路由器
从导入存储。/商店/商店
从导入Api ./API/index ；
Vue.config.productionTip=false
Vue.prototype. $ axios=Api
/* eslint-禁用无-新*/
新Vue({
埃尔： #app ，
路由器，
店，
组件：{ App }，
模板："应用程序/"
})
（4）第四步：src/components/HelloWorld.vue
模板
/模板
脚本
导出默认值{
名称：“HelloWorld”，
data() {
返回{}
},
方法：{
getData() {
let data={
id: 1
}
这个. axios.getListData(数据)。然后((res)={
控制台。日志(分辨率)；
})
},
postData() {
let data={
id: 1，
味精：2
}
这个axios.postListData(数据)。然后((res)={
控制台。日志(分辨率)；
})
},
postFormData() {
let data={
id: 1，
味精：2
}
let formData=new formData()；
对于（输入数据){
formData.append(key，data[key])；
}
这个axios.postListData(formData)。然后((res)={
控制台。日志(分辨率)；
})
},
deleteData() {
let data={
id: 1
}
这个. axios.deleteListData(数据)。然后((res)={
控制台。日志(分辨率)；
})
},
},
已创建(){
这个。get data()；
这个。postdata()；
这个。postformdata()；
这个。deletedata()；
}
}
/脚本
！-添加"限定范围"属性以将半铸钢钢性铸铁(Cast Semi-Steel)仅限制到此组件-
样式范围
/风格
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。