vue中使用Ajax(axios)、vue函数中this指向问题
Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。
axios中文文档库：http://www.axios-js.com/zh-cn/docs/
git地址：https://github.com/axios/axios
1.Axios简单使用
1.axios发送简单的get请求
后台：
@RequestMapping("/index")
@ResponseBody
public Map index(HttpServletRequest request, HttpServletResponse response, @RequestParam Map condition) {
System.out.println(condition);
// 允许ajax跨域请求
response.setHeader("Access-Control-Allow-Origin", "*");
return condition;
}
前台：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/axios.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <script> // 为给定 ID 的 user 创建请求 axios.get('http://localhost:8088/weixin/test/index.html?name=zs') .then(function(response) { console.log(response); }) .catch(function(error) { console.log(error); }); </script> </body> </html>
结果：
上面的请求还可以：
<script>
// 上面的请求也可以这样做
axios.get('http://localhost:8088/weixin/test/index.html', {
params: {
name: 'zs2'
}
})
.then(function(response) {
console.log(response);
})
.catch(function(error) {
console.log(error);
});
</script>
2.发送POST请求
后台需要过滤器中允许跨域请求：
package cn.qlq.filter; import java.io.IOException; import javax.servlet.Filter; import javax.servlet.FilterChain; import javax.servlet.FilterConfig; import javax.servlet.ServletException; import javax.servlet.ServletRequest; import javax.servlet.ServletResponse; import javax.servlet.annotation.WebFilter; import javax.servlet.http.HttpServletResponse; /** * 允许跨域请求 */ @WebFilter(filterName = "corsFilter", urlPatterns = "/*") public class CorsFilter implements Filter { public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException { System.out.println(1); HttpServletResponse response2 = (HttpServletResponse) response; response2.setHeader("Access-Control-Allow-Origin", "*"); // 解决跨域访问报错 response2.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE"); response2.setHeader("Access-Control-Max-Age", "3600"); // 设置过期时间 response2.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, client_id, uuid, Authorization"); response2.setHeader("Cache-Control", "no-cache, no-store, must-revalidate"); // 支持HTTP // 1.1. response2.setHeader("Pragma", "no-cache"); // 支持HTTP 1.0. // response.setHeader("Expires", // "0"); chain.doFilter(request, response); } @Override public void destroy() { } @Override public void init(FilterConfig arg0) throws ServletException { } }
Controller代码：
@RequestMapping("/index")
@ResponseBody
public Map index(HttpServletRequest request, HttpServletResponse response, @RequestBody Map condition) {
System.out.println(condition);
return condition;
}
前台代码：
<script> axios.post('http://localhost:8088/weixin/test/index.html', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function(response) { console.log(response); }) .catch(function(error) { console.log(error); }); </script>
结果：
post的请求头Content-Type是application/json，发送JSON数据请求
补充：关于axios中发送同步请求
有时候必须使用同步请求，比如请求回数据之后做其他处理。ajax请求的话使用async:false即可。在axios中的话没有提供参数，需要借助 async 函数和 await关键字。async 是 ES7 才有的。
例如：axios默认异步请求
function test() { console.log(1); axios.post('http://localhost:8088/weixin/test/index.html', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function(response) { console.log(response); }) .catch(function(error) { console.log(error); }); console.log(2); } test();
结果：
发送同步请求：
async function test() { console.log(1); var response = await axios.post('http://localhost:8088/weixin/test/index.html', { firstName: 'Fred', lastName: 'Flintstone' }); console.log(response); console.log(2); } test();
结果：
3.请求配置
{ // `url` 是用于请求的服务器 URL url: '/user', // `method` 是创建请求时使用的方法 method: 'get', // default // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。 // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL baseURL: 'https://some-domain.com/api/', // `transformRequest` 允许在向服务器发送前，修改请求数据 // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法 // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream transformRequest: [function (data, headers) { // 对 data 进行任意转换处理 return data; }], // `transformResponse` 在传递给 then/catch 前，允许修改响应数据 transformResponse: [function (data) { // 对 data 进行任意转换处理 return data; }], // `headers` 是即将被发送的自定义请求头 headers: {'X-Requested-With': 'XMLHttpRequest'}, // `params` 是即将与请求一起发送的 URL 参数 // 必须是一个无格式对象(plain object)或 URLSearchParams 对象 params: { ID: 12345 }, // `paramsSerializer` 是一个负责 `params` 序列化的函数 // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/) paramsSerializer: function(params) { return Qs.stringify(params, {arrayFormat: 'brackets'}) }, // `data` 是作为请求主体被发送的数据 // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH' // 在没有设置 `transformRequest` 时，必须是以下类型之一： // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams // - 浏览器专属：FormData, File, Blob // - Node 专属： Stream data: { firstName: 'Fred' }, // `timeout` 指定请求超时的毫秒数(0 表示无超时时间) // 如果请求话费了超过 `timeout` 的时间，请求将被中断 timeout: 1000, // `withCredentials` 表示跨域请求时是否需要使用凭证 withCredentials: false, // default // `adapter` 允许自定义处理请求，以使测试更轻松 // 返回一个 promise 并应用一个有效的响应 (查阅 [response docs](#response-api)). adapter: function (config) { /* ... */ }, // `auth` 表示应该使用 HTTP 基础验证，并提供凭据 // 这将设置一个 `Authorization` 头，覆写掉现有的任意使用 `headers` 设置的自定义 `Authorization`头 auth: { username: 'janedoe', password: 's00pers3cret' }, // `responseType` 表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream' responseType: 'json', // default // `responseEncoding` indicates encoding to use for decoding responses // Note: Ignored for `responseType` of 'stream' or client-side requests responseEncoding: 'utf8', // default // `xsrfCookieName` 是用作 xsrf token 的值的cookie的名称 xsrfCookieName: 'XSRF-TOKEN', // default // `xsrfHeaderName` is the name of the http header that carries the xsrf token value xsrfHeaderName: 'X-XSRF-TOKEN', // default // `onUploadProgress` 允许为上传处理进度事件 onUploadProgress: function (progressEvent) { // Do whatever you want with the native progress event }, // `onDownloadProgress` 允许为下载处理进度事件 onDownloadProgress: function (progressEvent) { // 对原生进度事件的处理 }, // `maxContentLength` 定义允许的响应内容的最大尺寸 maxContentLength: 2000, // `validateStatus` 定义对于给定的HTTP 响应状态码是 resolve 或 reject promise 。如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`)，promise 将被 resolve; 否则，promise 将被 rejecte validateStatus: function (status) { return status >= 200 && status < 300; // default }, // `maxRedirects` 定义在 node.js 中 follow 的最大重定向数目 // 如果设置为0，将不会 follow 任何重定向 maxRedirects: 5, // default // `socketPath` defines a UNIX Socket to be used in node.js. // e.g. '/var/run/docker.sock' to send requests to the docker daemon. // Only either `socketPath` or `proxy` can be specified. // If both are specified, `socketPath` is used. socketPath: null, // default // `httpAgent` 和 `httpsAgent` 分别在 node.js 中用于定义在执行 http 和 https 时使用的自定义代理。允许像这样配置选项： // `keepAlive` 默认没有启用 httpAgent: new http.Agent({ keepAlive: true }), httpsAgent: new https.Agent({ keepAlive: true }), // 'proxy' 定义代理服务器的主机名称和端口 // `auth` 表示 HTTP 基础验证应当用于连接代理，并提供凭据 // 这将会设置一个 `Proxy-Authorization` 头，覆写掉已有的通过使用 `header` 设置的自定义 `Proxy-Authorization` 头。 proxy: { host: '127.0.0.1', port: 9000, auth: { username: 'mikeymike', password: 'rapunz3l' } }, // `cancelToken` 指定用于取消请求的 cancel token // （查看后面的 Cancellation 这节了解更多） cancelToken: new CancelToken(function (cancel) { }) }
4.响应结构
{ // `data` 由服务器提供的响应 data: {}, // `status` 来自服务器响应的 HTTP 状态码 status: 200, // `statusText` 来自服务器响应的 HTTP 状态信息 statusText: 'OK', // `headers` 服务器响应的头 headers: {}, // `config` 是为请求提供的配置信息 config: {}, // 'request' // `request` is the request that generated this response // It is the last ClientRequest instance in node.js (in redirects) // and an XMLHttpRequest instance the browser request: {} }
补充：关于axios拦截器的使用
有时候希望发送请求处理之前和之后做一些处理。比如说每个请求携带token参数，接收消息之后根据回传的结果验证是否正确，不正确统一处理。
前端代码：
// 添加请求拦截器 axios.interceptors.request.use(function(config) { // 模拟处理前增加token console.log("处理前 "); config.data.token = "123456"; return config; }, function(error) { // 对请求错误做些什么 return Promise.reject(error); }); // 添加响应拦截器 axios.interceptors.response.use(function(response) { // 对响应数据做点什么 console.log("处理后"); if(response.data.success) { // 如果是成功返回信息之后提取出来返回以供后面的调用链使用 return response.data.data; } else { // 如果返回false记录一下返回Promise 对象。不会执行当前promise. console.log(response.data.msg); return new Promise(function(resolve, reject) { // resolve('success1'); // reject('error'); }); } }, function(error) { // 对响应错误做点什么 return Promise.reject(error); }); function test() { axios.post('http://localhost:8088/test/test.html', { firstName: 'Fred', lastName: 'Flintstone' }).then(function(resData) { // 这里处理返回的data console.log(resData); }); } test();
后端返回的JSON工具类：
package cn.qs.utils; import java.io.Serializable; public class JSONResultUtil<T> implements Serializable { private static final long serialVersionUID = 3637122497350396679L; private boolean success; private T data; private String msg; public boolean isSuccess() { return success; } public void setSuccess(boolean success) { this.success = success; } public T getData() { return data; } public void setData(T data) { this.data = data; } public String getMsg() { return msg; } public void setMsg(String msg) { this.msg = msg; } public JSONResultUtil(boolean success) { this.success = success; } public JSONResultUtil(boolean success, String msg) { super(); this.success = success; this.msg = msg; } public JSONResultUtil(boolean success, T data, String msg) { super(); this.success = success; this.data = data; this.msg = msg; } /** * 返回正确结果不带数据 * * @return */ public static JSONResultUtil ok() { return new JSONResultUtil(true); } /** * 返回错误的结果带错误信息 * * @param msg * @return */ public static JSONResultUtil error(String msg) { return new JSONResultUtil(false, msg); } }
Controller返回正确：
@PostMapping("/test")
public JSONResultUtil<String> Test(@RequestBody String condition) {
System.out.println(condition);
return new JSONResultUtil<String>(true, condition, "ok");
}
结果：
Controller返回false：
@PostMapping("/test")
public JSONResultUtil<String> Test(@RequestBody String condition) {
System.out.println(condition);
return new JSONResultUtil<String>(false, null, "error");
}
结果：
2.vue中使用axios
1. 简单使用
后端代码：
@RequestMapping("/index")
@ResponseBody
public Map index(HttpServletRequest request, HttpServletResponse response, @RequestBody Map condition) {
condition.put("name", "zs");
condition.put("age", 25);
return condition;
}
前台：(请求后台的JSON数据，并且将得到的数据直接赋值给自己的data属性，自己的data原来为null)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/axios.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<h1>{{ data.name }} - {{ data.age }}</h1>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
data: null
},
mounted() {
axios
.post('http://localhost:8088/weixin/test/index.html', {
'test': 123
})
.then(response => (this.data = response.data))
.catch(function(error) { // 请求失败处理
console.log(error);
});
}
})
</script>
</body>
</html>
结果：
2. 请求图片流
1.方法一：
第一种方法就是向后台请求一个图片URL，然后改变image的src属性实现，其静态实例如下：
<div id="vue_det">
<img :src="src" />
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vue_det',
data: {
src: "http://localhost:8088/static/images/1.png",
}
})
</script>
2.方法2：
使用JS请求数据流。
<div id="vue_det">
<img :src="imgUrl" class="logoImg">
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vue_det',
data: {
imgUrl: '123'
},
mounted: function() {
var url = 'http://localhost:8088/static/images/1.png';
axios.get(url, {
responseType: 'arraybuffer'
}).then(function(data) {
vm.imgUrl = 'data:image/png;base64,' + btoa(new Uint8Array(data.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
console.log(this.imgUrl)
}).catch(function(err) {
console.error(err)
});
}
})
</script>
注意：
(1)vue组件或者实例中，不管是生命周期钩子函数created还是自定义函数plus，他们中的this都是指当前vue实例。
(2)回调函数中，如果是普通函数，this指向window对象，如果是 ES6的 =>箭头函数，this指向当前实例。所以建议一般情况下用箭头函数指向当前实例。
<script type="text/javascript">
var vm = new Vue({
el: '#vue_det',
data: {
imgUrl: '123'
},
mounted: function() {
console.log(this);
var url = 'http://localhost:8088/static/images/1.png';
axios.get(url, {
responseType: 'arraybuffer'
}).then(function(data) {
console.log(this);
vm.imgUrl = 'data:image/png;base64,' + btoa(new Uint8Array(data.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
}).catch(function(err) {
console.error(err)
});
}
})
</script>
结果：
<script type="text/javascript">
var vm = new Vue({
el: '#vue_det',
data: {
imgUrl: '123'
},
mounted: function() {
console.log(this);
var url = 'http://localhost:8088/static/images/1.png';
axios.get(url, {
responseType: 'arraybuffer'
}).then(data => {
console.log(this);
this.imgUrl = 'data:image/png;base64,' + btoa(new Uint8Array(data.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
}).catch(function(err) {
console.error(err)
});
}
})
</script>
结果：
补充：如果想在函数普通回调函数中用当前vue实例对象，可以在外面提前将this付给一个变量，例如：
async onChangeKindergarten(value) { // 将_this指向当前vm对象 const _this = this; var confirmContent = '您确定要选择 ' + value + ' 吗？您只有一次修改的机会!'; this.$vux.confirm.show({ title: '', content: confirmContent, onConfirm() { axios.post('/user/updateLoginUser.html', { remark1: value }); _this.remark1 = value; _this.$vux.toast.text('修改成功'); }, onCancel() { _this.remark1 = ''; } }) }
【当你用心写完每一篇博客之后,你会发现它比你用代码实现功能更有成就感!】
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
· 一个奇形怪状的面试题：Bean中的CHM要不要加volatile？
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· Obsidian + DeepSeek：免费 AI 助力你的知识管理，让你的笔记飞起来！
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了