前端代码编写完毕,想用最基本的axios进行交互,上传文件给后端,再获取后端数据。
没有进行axios的封装,先通过npm 引入axios,在main.js中全局配置一下。它不同于其他组件不能用vue.use()只能用 Vue.prototype.$axios = axios。传递数据时和后端商量一个唯一标识符sessinId,把sessionid拼接到url上,methods方法根据后端给的文档决定,post请求与data连用,get请求把数据放在params中,headers请求头根据实际情况设置。
一、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(跨域请求伪造)
二、使用步骤
1.引入库
代码如下(示例):
示例代码
方法一
//请求格式类似于 http://localhost:8080/goods.json?id=1
this.$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请求
this.$axios.put('/url',{
id:1
}).then(res=>{
console.log(res.data);
})
patch请求
this.$axios.patch('/url',{
id:1
}).then(res=>{
console.log(res.data);
})
5、delete请求
示例代码
参数以明文形式提交
this.$axios.delete('/url',{
params: {
id:1
}
}).then(res=>{
console.log(res.data);
})
参数以封装对象的形式提交
this.$axios.delete('/url',{
data: {
id:1
}
}).then(res=>{
console.log(res.data);
})
//方法二
axios({
method: 'delete',
url: '/url',
params: { id:1 }, //以明文方式提交参数
data: { id:1 } //以封装对象方式提交参数
}).then(res=>{
console.log(res.data);
})
---