序
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
axios特征
- 从浏览器中创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御 XSRF
安装
在项目根目录执行以下命令进行安装:
$ npm install --save axios vue-axios
入口main.js修改如下
由于axios对于post请求的默认请求方式与jQuery不同,需要手动将 Content-Type
设置为 application/x-www-form-urlencoded
;另外,它传输的json字符串而不是类似这样的字符串(例如: id=5&name=loushengyue&sex=male
),所以我们还需要一个工具来讲json数据手动转换成这个格式,那么我们就可以使用nodejs的 querystring
组件。具体配置如下:
import axios from 'axios'
import VueAxios from 'vue-axios'
//axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded' //当前最新版本axios这一句无需配置
Vue.use(VueAxios, axios) //VueAxios, axios的位置不能颠倒
Vue.prototype.$qs = require('querystring') //nodejs自带querystring模块
注意:如果您的nodejs版本过低,有可能没有querystring模块,这时候你需要执行npm install --save query-string
进行安装,同时在入口页main.js
引入即可。
例如:Vue.prototype.$qs = require(‘query-string’)
在组件发出post请求
export default {
name: "App",
methods: {
postTest() {
let url = "/admin/postTest.php"
let data = { id: 5, name: "loushengyue" }
data = this.$qs.stringify(data)
console.log(data); //看一看这一句的输出,你会知道$qs.stringify的作用
this.axios.post(url, data).then(response => {
console.log(response); //这里返回的结果会包括请求头,返回数据结果等(这里的返回值与jQuery不一样)
})
}
},
created(){
this.postTest() //创建页面时调用postTest()方法(当然也可以通过点击事件触发)
}
}