Vue发送ajax请求方法介绍

一、vue-resource

1、简介

一款vue插件，用于处理ajax请求，vue1.x时广泛应用，现不被维护。

2、使用流程

step1：安装

【命令行输入】
npm install vue-resource --save

step2：引入

【main.js】
// 引入vue-resource
import VueResource from 'vue-resource'

// 使用vue-resource
Vue.use(VueResource)

step3：编码

【格式：】
this.$http.get().then()    返回的是一个Promise对象

step4：完整代码

【使用vue-cli创建项目】
https://www.jb51.net/article/235498.htm

【main.js】
import Vue from 'vue'
import App from './App.vue'
// 引入vue-resource
import VueResource from 'vue-resource'

// 使用vue-resource
Vue.use(VueResource)
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')


【App.vue】

step5：截图：

请求正常

点击链接跳转

使用错误的地址

弹出错误提示框

二、axios

1、简介

一款vue库，用于处理ajax请求，vue2.x时广泛应用。

2、流程

step1：安装

【命令行输入】
npm install axios --save

step2：引入

【在哪里使用，就在哪里引入】
import axios from 'axios';

step3：完整代码

【main.js】
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')



【App.vue】

step5：截图与上面的 vue-resource 一样，此处不重复截图。

3、axios 解决跨域问题

参考：https://www.jb51.net/article/235490.htm

到此这篇关于Vue发送ajax请求的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。