Vue22话 ajax

逆流者 2020年02月02日 82次浏览

vue中两个常用的ajax库

  • vue-resource
    vue 插件, 非官方库, vue1.x 使用广泛
  • axios
    通用的 ajax 请求库, 官方推荐, vue2.x 使用广泛

1. vue-resource

1.1 下载

npm install vue-resource --save

1.2 编码

// 在main.js中引入模块
import VueResource from 'vue-resource'
//声明使用插件
Vue.use(VueResource) // 内部会给vm 和 组件对象添加一个属性:$http

// 通过 vue/组件对象发送 ajax 请求
this.$http.get('/someUrl').then((response) => {
  // success callback
  console.log(response.data) //返回结果数据
}, (response) => {
  // error callback
  console.log(response.statusText) //错误信息
})

官方文档: https://github.com/pagekit/vue-resource/blob/develop/docs/http.md

2. axios

2.1 下载

npm install axios --save

2.2 编码

// 引入模块
import axios from 'axios'
// 发送 ajax 请求
axios.get(url)
  .then(response => {
    console.log(response.data) // 得到返回结果数据
  })
  .catch(error => {
    console.log(error.message)
  })

测试源码传送门