Axios

axios 是一个基于 promise 用于浏览器和 nodejs 的 http 客户端，本身具有以下特征：

• 从浏览器中创建 XMLHttpRequest
• 从 nodejs 发出 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 取消请求
• 自动转换 JSON 数据
• 客户端支持防止 CSRF / XSRF

安装

npm install axios

引入加载

import axios from 'axios'

将 axios 全局挂载到 vue 原型上

Vue.prototype.$axios = axios

get 请求

传统以及 ES6 接收 response

// 传统 js
getData() {
  var self = this 
  this.$axios.get('path')
	.then(function(res) {
	  self.items = res
	  console.log(res)
	})
	.catch(function(err) {
	  console.log(err)
	})
}

// ES6
getData() { 
  this.$axios.get('path')
	.then(res => {
	  this.items = res
	  console.log(res)
	})
	.catch(err => {
	  console.log(err)
	})
}

两种传递参数的方式

this.$axios.get('path', { 
  params: {
	page: 1,
	count: 10
  }
})
// 或者
this.$axios.get('path', {
  page: 1,
  count: 10
})
// 另一种是加到 path 上
this.$axios.get('path?page=1&count=10')

post 请求

post 传递数据有两种格式

• form-data ----> ?page=1&count=10
• x-www-form-urlencoded ----> {page: 1, count: 10}

在 axios 中，post 请求接收的参数必须是 form-data，所以要把传入的参数对象转化为 form-data。
通过 qs 插件，qs.stringify() 转化。

安装插件

npm install qs

引入使用

import qs from 'qs'

this.$axios.post(url, qs.stringify({
  page: 1,
  count: 10
}))
  .then(res => {
	console.log(res)
  })
  .catch(err => {
	console.log(err)
  })