您的位置:首页 > Web前端 > Vue.js

vue-cli(vue2.x)中使用axios

2018-11-06 13:41 537 查看

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。

特性

浏览器端发起XMLHttpRequests请求
Node端发起http请求
支持Promise API
拦截请求和响应
转化请求和响应(数据)
取消请求
自动转化json数据
客户端支持抵御XSRF(跨站请求伪造)

1、在项目根目录下使用npm安装

npm install axios --save

2、全局引入axios

在入口处文件(main.js)引入axios并原型化axios。

import axios from 'axios'

//Vue.use(axios)  // 注意 这样的用法是有问题的,axios不支持Vue.use()的声明方式
Vue.prototype.$ajax = axios
// 只是import进来是无法使用 axios 命令的。所以我们将 axios 改写为 Vue 的原型属性。那么在其他组件中就能使用$ajax方法了
3、使用axios

可以直接在任意组件中的js代码处使用

this.$ajax()
方法来请求接口数据了。

this.$ajax({
method: 'get', //请求方式
url: '请求接口地址'
})
.then(function (res) { //成功请求的回调函数
console.log(res)
})
.catch(function (error) {  //请求失败的回调函数
console.log(error)
})
阅读更多
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: