vue使用axios调用后端接口,axios在vue中的使用慕课笔记
本文主要介绍基于axios请求包的vue应用的相关资料。通过示例代码进行了非常详细的介绍，对您的学习或工作有一定的参考价值。有需要的朋友下面和边肖一起学习。
目录
什么是axios？Axios请求类型？Axios封装了默认的自定义配置配置的负载优先级拦截器get请求post请求delete请求put请求：更新整个对象资源patch请求：更新对象的本地资源并发请求axios和ajax有什么区别？axios如何定制包？摘要
什么是axios？
Axios是一个基于promise的HTTP库，可用于浏览器和node.js
特性：
从浏览器创建XMLHttpRequests
从node.js创建一个http请求
支持承诺API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF。
Promises
Axios受ES6 Promise的本机实现支持。如果您的环境不支持ES6 Promise，您可以使用polyfill。
axios的请求类型？
一组安装节点的环境：
以下是三种报价方式：
Npm安装axios-首先在节点中安装axios，然后将axios引入api包。
Bower安装axios - npm bower安装在npm，axios包引入到bower中。
鲍尔：
Bower可以管理包括HTML、CSS、JavaScript、字体甚至图像文件在内的组件。Bower不会连接或缩减代码或做任何其他事情——只会安装软件包及其依赖项所需的正确版本。
将js文件直接引入vue
script src= https://UNP kg . com/axios/dist/axios . min . js /script
axios封装默认的自定义配置
const instance=axios.create({
{
//` URL 是用于请求的服务器URL
URL:“/用户”，
//` method 是创建请求时使用的方法。
方法：“get”，//默认值
//`baseurl 将自动添加到` url 前面，除非` url 是绝对url。
//通过设置一个baseURL，可以很容易地为axios实例的方法传递相对URL。
baseURL: https://some-domain . com/API/，
//` TransformRequest 允许在将请求数据发送到服务器之前对其进行修改。
//只能在“PUT”、“POST”和“PATCH”请求方法中使用。
//以下数组中的函数必须返回string、ArrayBuffer或Stream
transform request:[function(data，headers) {
//对数据进行任意转换处理。
返回数据；
}],
//`TransformResponse 允许在将响应数据传递给then/catch之前对其进行修改。
transform response:[函数(数据){
//对数据进行任意转换处理。
返回数据；
}],
//`headers 是要发送的自定义请求标头。
标头：{ X-Requested-With : XMLHttpRequest }，
//`params `是随请求一起发送的URL参数。
//它必须是普通对象或URLSearchParams对象
参数：{
ID: 12345
},
//params serializer 是负责 params 序列化的函数。
//(例如https://www.npmjs.com/package/qs,http://api.jquery.com/jquery.param/)
paramsSerializer:函数(params) {
return Qs.stringify(params，{arrayFormat:括号 })
},
//`data 是作为请求主体发送的数据。
//仅适用于这些请求方法“PUT”、“POST”和“PATCH”
//未设置transformRequest时，它必须是以下类型之一：
//- string，plain object，ArrayBuffer，ArrayBufferView，URLSearchParams
//-浏览器专用：表单数据、文件、Blob
//-专用于节点：流
数据：{
名字：“弗雷德”
},
//`timeout 指定请求超时的毫秒数(0表示无超时)
//如果请求的通话费用超过超时，请求将被中断。
超时：1000，
//` with credentials 指示跨域请求是否需要凭据。
withCredentials: false，//默认值
//` adapter 允许对请求进行自定义处理，使测试更容易。
//返回一个承诺，应用一个有效的响应(参考【响应文档】(#response-api))。
适配器：功能（配置){
/* .*/
},
//`auth 表示应该使用超文本传送协议基础验证，并提供凭据
//这将设置一个`授权头，覆写掉现有的任意使用`标题设置的自定义`授权头
验证：{
用户名：“janedoe”，
密码：" s00pers3cret "
},
//`响应类型表示服务器响应的数据类型，可以是arraybuffer ， blob ， document ， json ， text ， stream
responseType: json ，//默认值
//`responseEncoding 表示用于解码响应的编码
//注意：对于“流”或客户端请求的"响应类型"忽略
响应编码：“utf8”，//默认值
//`xsrfCookieName 是用作跨站请求伪造令牌的值的甜饼干的名称
xsrfCookieName: XSRF-TOKEN ，//默认值
//`xsrfHeaderName 是携带跨站请求伪造标记值的超文本传送协议（Hyper Text Transport Protocol的缩写）头的名称
xsrfHeaderName: X-XSRF-TOKEN ，//默认值
//` onuploadpress 允许为上传处理进度事件
onUploadProgress:函数(进展事件){
//对本机进度事件做任何您想做的事情
},
//` ondownloadpress 允许为下载处理进度事件
onDownloadProgress:函数(进展事件){
//对原生进度事件的处理
},
//`maxContentLength 定义允许的响应内容的最大尺寸
maxContentLength: 2000，
//`有效状态定义对于给定的超文本传送协议响应状态码是分解或拒绝承诺。如果`有效状态返回`真的` (或者设置为`空或`未定义`),承诺将被解决；否则，承诺将被拒绝
有效状态：函数（状态){
退货状态=200状态300;//默认
},
//`maxRedirects 定义在节点。射流研究…中跟随的最大重定向数目
//如果设置为0,将不会跟随任何重定向
maxRedirects: 5，//默认值
//`socketPath 定义要在节点. js中使用的一种多用户的计算机操作系统套接字。
//例如"/var/run/docker.sock "向码头工人守护程序发送请求。
//只能指定"套接字路径"或代理服务器.
//如果两者都指定了，则使用套接字路径.
socketPath: null，//默认值
//`httpAgent 和` https代理分别在节点。射流研究…中用于定义在执行超文本传送协议(超文本传输协议的缩写)和安全超文本传输协议时使用的自定义代理。允许像这样配置选项：
//`保持活动状态默认没有启用
httpAgent:新的http .代理({ keepAlive: true })，
https代理：新https .代理({ keepAlive: true })，
//代理定义代理服务器的主机名称和端口
//`auth 表示超文本传送协议基础验证应当用于连接代理，并提供凭据
//这将会设置一个`代理授权头，覆写掉已有的通过使用`标题设置的自定义`代理授权头。
代理服务器：{
主持人："127.0.0.1",
端口：9000,
验证：{
用户名：“mikeymike”，
密码："长发公主3l英寸
}
},
//`取消令牌指定用于取消请求的取消令牌
//(查看后面的取消这节了解更多)
取消令牌：新的取消令牌(功能(取消){
})
}
}).然后（函数（响应){
//`数据由服务器提供的响应
数据：{},
//`状态来自服务器响应的超文本传送协议状态码
状态：200,
//`statusText 来自服务器响应的超文本传送协议状态信息
statusText:"好的",
//`标题服务器响应的头
邮件头：{},
//`配置是为请求提供的配置信息
配置：{},
//请求
//`请求是生成此响应的请求
//它是节点. js中的最后一个客户端请求实例（在重定向中)
//以及浏览器的XMLHttpRequest实例
请求：{}
});
配置的加载优先级
高到低顺序：
第一步：配置默认值
在请求中设置的配置项
instance.get(/longRequest ，{
超时：5000
});
第二部：全局的爱可信默认值
在美国石油学会(美国石油协会)文件中设置的配置项
实例。默认值。超时=2500；
第三步：自定义实例默认值
在创建爱可信实例中设置的配置项
var instance=axios。create()；
拦截器
//添加请求拦截器
axios。截击机。请求。使用(功能(配置){
//在发送请求之前做些什么
返回配置；
},函数（错误){
//对请求错误做些什么
返回承诺。拒绝(错误);
});
//添加响应拦截器
axios。截击机。回应。使用(函数(响应){
//对响应数据做点什么
返回响应；
},函数（错误){
开关(错误.响应.状态){
案例400:
err.message=错误请求；
打破；
案例401:
err.message=未授权，请重新登录；
打破；
案例403:
err.message=拒绝访问；
打破；
案例404:
err.message=请求错误，未找到该资源；
打破；
案例405:
err.message=请求方法未允许；
打破；
案例408:
err.message=请求超时；
打破；
案例415:
err.message=服务器无法处理请求附带的媒体格式；
打破；
案例500:
err.message=服务器出错；
打破；
案例501:
err.message=网络未实现；
打破；
案例502:
err.message=网络错误；
打破；
案例503:
err.message=服务不可用；
打破；
案例504:
err.message=网络超时；
打破；
案例505:
err.message=http版本不支持该请求；
打破；
默认值：
err.message=`连接错误$ { err。回应。状态} `；
}
}否则{
err.message=连接到服务器失败；
}
回报承诺。解决(错误。回应)；
});
从“Vue”导入Vue
从" axios "导入axios
get请求
axios.get({
方法：“得到”，
网址：“xxxx”，
reponseType: ，//相应类型
参数：{//入参
}
}).然后（函数（响应){
.
})
post请求
axios({
方法： post ，
网址："/用户/12345",
数据：{
名字："弗雷德",
姓氏："燧石族"
}
}).然后（函数(资源){
});
delete请求
axios({
方法："删除",
网址："/用户/12345",
//入参一：挂载到请求后面
parmes:{
}
//入参二：挂载到请求体内
数据{
}
}).然后（函数(资源){
});
put请求：更新整个对象资源
axios({
方法：“放”，
网址："/用户/12345",
数据{
}
}).然后（函数(资源){
});
patch请求：更新对象的局部资源
axios({
方法："补丁",
网址："/用户/12345",
数据{
}
}).然后（函数(资源){
});
提供封装后的另一种写法：
axios.get(url[，config])
axios.delete(url[，config])
axios.post(url[，数据[,配置]])
axios.put(url[，数据[,配置]])
axios.patch(url[，数据[,配置]])
并发请求
axios.all(可迭代)
axios.spread(回调)
函数getUserAccount() {
返回axios。get(/user/12345 )；
}
函数getUserPermissions() {
返回axios。get(/user/12345/permissions )；
}
//请求数组
axios.all([getUserAccount()，getUserPermissions()])。然后(axios.spread(function (acct，perms) {//对应请求的响应体
//两个请求现在都执行完成
}));
axios与ajax的区别？
axios:
从节点。射流研究…创建超文本传送协议(超文本传输协议的缩写)请求
支持承诺应用程序接口
客户端支持防止跨站点请求伪造
提供了一些并发请求的接口（重要，方便了很多的操作)
ajax:
3.框架整个项目太大，单纯使用创建交互式、快速动态网页应用的网页开发技术却要引入整个框架非常的不合理（采取个性化打包的方案又不能享受加拿大服务)
axios怎样自定义封装？
1、建立接口请求封装、响应、拦截、认证、等基础配置文件索引。射流研究…
引入静态资源
从" axios "导入axios
从" qs "导入QS；
从导入apiMap ./API映射；
设置全局默认参数
axios。默认值。with credentials=false
axios。默认值。标题。post[ Content-Type ]= application/JSON；charset=UTF-8 ；
设置请求默认参数
const instance=axios.create({
baseURL: process.env.API_ROOT，
超时：15 * 1000,
验证：{
.
},
标题：{
内容类型":"应用程序/JSON；charset=utf-8 ，
x-Requested-With : XMLHttpRequest ，
},
},
);
设置请求拦截：
实例。截击机。请求。使用(功能(配置){
.
})
设置相应拦截：
//响应拦截器即异常处理
实例。截击机。回应。使用(响应=
反应
,(错误)={
如果(呃。呃。响应){
开关(错误.响应.状态){
案例400:
err.message=错误请求；
打破；
案例401:
err.message=未授权，请重新登录；
打破；
案例403:
err.message=拒绝访问；
打破；
案例404:
err.message=请求错误，未找到该资源；
打破；
案例405:
err.message=请求方法未允许；
打破；
案例408:
err.message=请求超时；
打破；
案例415:
err.message=服务器无法处理请求附带的媒体格式；
打破；
案例500:
err.message=服务器出错；
打破；
案例501:
err.message=网络未实现；
打破；
案例502:
err.message=网络错误；
打破；
案例503:
err.message=服务不可用；
打破；
案例504:
err.message=网络超时；
打破；
案例505:
err.message=http版本不支持该请求；
打破；
默认值：
err.message=`连接错误$ { err。回应。状态} `；
}
}否则{
err.message=连接到服务器失败；
}
回报承诺。解决(错误。回应)；
});
封装接口请求：
让api={
/**
*获取方法封装
* @param url
* @param params
* @returns {Promise}
*/
get (url，params={}) {
返回新承诺((解决，拒绝)={
instance.get(apiMap[url]，params).然后(res={
解析（结果数据)
}).接住(错误={
拒绝（错误)
})
})
},
/**
*邮政
* @param url
* @param params
* @returns {Promise}
*/
post (url，params={}) {
返回新承诺((解决，拒绝)={
instance.post(apiMap[url]，params)。然后(res={
解析（结果数据)
},错误={
拒绝（错误)
})
})
},
/**
*删除方法封装
* @param url
* @param params
* @returns {Promise}
*/
删除(url，params={}) {
返回新承诺((解决，拒绝)={
instance.delete(apiMap[url]，params).然后(res={
解析（结果数据)
}).接住(错误={
拒绝（错误)
})
})
},
/**
*放方法封装
* @param url
* @param params
* @returns {Promise}
*/
put (url，params={}) {
返回新承诺((解决，拒绝)={
instance.put(apiMap[url]，params).然后(res={
解析（结果数据)
}).接住(错误={
拒绝（错误)
})
})
},
/**
*补丁方法封装
* @param url
* @param params
* @returns {Promise}
*/
修补程序(url，params={}) {
返回新承诺((解决，拒绝)={
instance.patch(apiMap[url]，params).然后(res={
解析（结果数据)
}).接住(错误={
拒绝（错误)
})
})
}
}
导出默认美国石油学会(American Petroleum Institute)
2、创建一个键值形式的接口文件，方便接口请求管理apiMap.js
导出默认值{
//主题列表
关键字："路径"
};
3、将指数文件引入某视频剪辑软件入口文件中
引入某视频剪辑软件资源
从“vue”导入某视频剪辑软件
引入viewui插件
从"视图-设计"导入ViewUI
引入视图钢性铸铁文件
导入"视图-设计/分布/样式/iview。CSS”；
导入文件默认不需要加文件后缀
从"/index "导入美国石油学会(American Petroleum Institute)
全局绑定$ 为实例属性设置作用域
Vue.prototype. $ api=Api
全局参数配置：
创建配置文件index.js:
从“Vue”导入Vue
从" Vuex "导入Vuex
从导入状态./州；
vue。使用(Vuex)；
const store=new Vuex .商店（州);
导出默认存储；
创建全局参数详细文件状态。射流研究…
导出默认值{
状态：{ //这里放全局参数
测试：0
},
突变：{ //设置值
测试(状态，值)=state.test=值；
},
getter:{//返回值
测试：状态=状态.测试
}
};
调用方式：
定义变量数据=这个100美元商店。吸气剂。测试；
定义变量数据=这个store.commit(test ，数据);
vue。使用(Vuex)；
判断某视频剪辑软件是否已经注册过状态管理插件；
将vuexInit函数混入到某视频剪辑软件的创建前生命周期中；
实例化某视频剪辑软件时，会在某视频剪辑软件每个实例上添加s t o r e属性，并将v u e x的实例绑定到商店属性，并将状态管理的实例绑定
到商店属性，并将状态管理的实例绑定到商店属性上。
总结
这就是这篇关于基于axios请求封装的vue应用的文章。有关axios请求封装的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。