Vue 中使用Ajax请求

Posted 2022-05-24 adongyo

Vue 项目中常用的 2 个 ajax 库

（一）vue-resource

vue 插件, 非官方库,vue1.x 使用广泛

vue-resource 的使用

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

下载

npm install vue-resource--save

编码

// 引入模块 ，注意应该在App.vue中引入和声明

import VueResource from ‘vue-resource‘

// 声明使用

Vue.use(VueResource)

// 通过 vue组件对象发送 ajax 请求

this.$http.get(‘/someUrl‘).then((response)=>

//successcallback

console.log(response.data)//返回结果数据

,(response)=>

//errorcallback
console.log(response.statusText)//错误信息
)

 

 

 

（二）axios

通用的 ajax 请求库, 官方推荐,vue2.x 使用广泛

axios 的使用

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

下载

npm install axios--save

编码

// 引入模块

import axios from ‘axios‘
// 发送 ajax 请求

axios.get(url) .then(response=>

//successcallback

console.log(response.data)// 得到返回结果数据

) .catch(error=>

console.log(error.message)//错误信息

)