vue-cli(vue2.x)中使用axios的基本方法

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

特性

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

安装axios

npm install axios --save

1、全局引入axios

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

import axios from 'axios'

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

1.1、使用axios

可以直接在任意组件中的js代码处使用this.$ajax()方法来请求接口数据了。

this.$ajax({
        method: 'get', //请求方式
        url: '请求接口地址'
      })
      .then(function (res) { //成功请求的回调函数（注意这里应该使用箭头函数，防止this指向发生变化而出错）
        console.log(res)
      })
      .catch(function (error) {  //请求失败的回调函数
        console.log(error)
      })

2、局部引入axios

安装好axios后，在需要的组件中的script标签中import引入即可使用，不用像全局那样配置了。

// 引入
import axios from 'axios'

// 使用
	axios({
        method: 'get', //请求方式
        url: '请求接口地址'
      })
      .then(function (res) { //成功请求的回调函数（注意这里应该使用箭头函数，防止this指向发生变化而出错）
        console.log(res)
      })
      .catch(function (error) {  //请求失败的回调函数
        console.log(error)
      })