龙空技术网

在vue中发起Ajax请求的方法

IT小村 315

前言:

当前朋友们对“js的ajax文件上传插件”大约比较珍视,姐妹们都想要知道一些“js的ajax文件上传插件”的相关资讯。那么小编也在网上网罗了一些有关“js的ajax文件上传插件””的相关文章,希望兄弟们能喜欢,朋友们快快来了解一下吧!

一、前言

前后端分离开发模式,前端专注于视觉层、后端专注于业务层,彼此之间的交互通过 ajxa 来进行。

vue 中发起 ajax 请求的的插件,目前流行使用 axios、vue-resource。

二、借助axios

1.安装

npm install axios

官方:

2.配置

在 main.js 中,引入 axios,同时可以配置请求的前缀,绑定其到 $http 中等。

// 导入第三方ajax请求方法import axios from 'axios'// 设置全局请求前缀axios.defaults.baseURL = ';// 绑定ajax请求Vue.prototype.$http = axios

3.示例

async onSubmit() {    const {    	data: res    } = await this.$http.post('/blog/addBlog', this.addBlogVO)    if (res.code == 200) {    	this.$message.success(res.msg)    	this.$router.push("/blog")    } else {    	this.$message.error(res.msg);    }}
三、借助vue-resource

1.安装

npm install vue-resource

官方:

2.配置

在 main.js 中,引入 vue-resource,同时可以配置请求的前缀,绑定其到 $http 中等。

import VueResource from 'vue-resource'Vue.use(VueResource)// 如果我们通过全局配置了,请求的数据接口 根域名,则 ,在每次单独发起 http 请求的时候,请求的 url 路径,应该以相对路径开头,前面不能带 /  ,否则 不会启用根路径做拼接;Vue.http.options.root = ';;// 全局启用 emulateJSON 选项:如果Web服务器无法处理编码为application/json的请求,你可以启用emulateJSON选项。Vue.http.options.emulateJSON = true;

3.示例

this.$http.delete("deleteBlogById/" + row.id).then(result => {    if (result.body.code === 200) {      // 删除成功      this.listAllBlog();    } else {      alert("删除失败!");    }});
四、其他

本文中,介绍下目前流行的 ajax 请求插件 axios(推荐)、vue-resource(不推荐) 。

标签: #js的ajax文件上传插件