在 vue1.0 的时候有一个官方推荐的 ajax 插件 vue-resource, 但是自从 Vue 更新到 2.0 之后, 官方就不再更新 vue-resource.
关于为什么放弃推荐? -> 尤大原话
最近团队讨论了一下, Ajax 本身跟 Vue 并没有什么需要特别整合的地方, 使用 fetch polyfill 或是 axios,superagent 等等都可以起到同等的效果,
vue-resource 提供的价值和其维护成本相比并不划算, 所以决定在不久以后取消对 vue-resource 的官方推荐. 已有的用户可以继续使用,
但以后不再把 vue-resource 作为官方的 ajax 方案. 这里可以去掉 vue-resource, 文档也不必翻译了.
目前主流的 Vue 项目, 都选择 axios 来完成 ajax 请求, 下面来具体介绍一下 axios 的使用.
axios 简介
axios 是一个基于 Promise 用于浏览器和 nodejs 的 HTTP 客户端, 它本身具有以下特征:
从浏览器中创建 XMLHttpRequest
从 node.js 发出 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换 JSON 数据
客户端支持防止 CSRF/XSRF
引入方式:
$ npm install axios
// 使用淘宝源
$ cnpm install axios
// 或者使用 cdn:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> https://unpkg.com/axios/dist/axios.min.js%22%3E%3C/script%3E ;
安装其他插件的时候, 可以直接在 main.js 中引入并使用 Vue.use() 来注册, 但是 axios 并不是 vue 插件, 所以不能 使用 Vue.use(), 所以只能在每个需要发送请求的组件中即时引入.
为了解决这个问题, 我们在引入 axios 之后, 通过修改原型链, 来更方便的使用.
- //main.js
- import axios from 'axios'
- Vue.prototype.$http = axios
在 main.js 中添加了这两行代码之后, 就能直接在组件的 methods 中使用 $http 命令
复制代码
- methods: {
- postData () {
- this.$http({
- method: 'post',
- url: '/user',
- data: {
- name: 'xiaoming',
- info: '12'
- }
- })
- }
复制代码
下面来介绍 axios 的具体使用:
执行 GET 请求
复制代码
- // 向具有指定 ID 的用户发出请求
- $http.get('/user?ID=12345')
- .then(function (response) {
- console.log(response);
- })
- .catch(function (error) {
- console.log(error);
- });
- // 也可以通过 params 对象传递参数
- $http.get('/user', {
- params: {
- ID: 12345
- }
- })
- .then(function (response) {
- console.log(response);
- })
- .catch(function (error) {
- console.log(error);
- });
复制代码
执行 POST 请求
复制代码
- $http.post('/user', {
- firstName: 'Fred',
- lastName: 'Flintstone'
- })
- .then(function (response) {
- console.log(response);
- })
- .catch(function (error) {
- console.log(error);
- });
复制代码
执行多个并发请求
复制代码
- function getUserAccount() {
- return $http.get('/user/12345');
- }
- function getUserPermissions() {
- return $http.get('/user/12345/permissions');
- }
- axios.all([getUserAccount(), getUserPermissions()])
- .then($http.spread(function (acct, perms) {
- // 两个请求现已完成
- }));
复制代码
axios API
可以通过将相关配置传递给 axios 来进行请求.
axios(config)
复制代码
- // 发送一个 POST 请求
- axios({
- method: 'post',
- url: '/user/12345',
- data: {
- firstName: 'Fred',
- lastName: 'Flintstone'
- }
- });
复制代码
- axios(url[, config])
- 1
- 2
- // 发送一个 GET 请求 (GET 请求是默认请求模式)
- axios('/user/12345');
请求方法别名
为了方便起见, 已经为所有支持的请求方法提供了别名.
- axios.request(config)
- axios.get(url [,config])
- axios.delete(url [,config])
- axios.head(url [,config])
- axios.post(url [,data [,config]])
- axios.put(url [,data [,config]])
- axios.patch(url [,data [,config]])
注意
当使用别名方法时, 不需要在 config 中指定 url,method 和 data 属性.
并发
帮助函数处理并发请求.
- axios.all(iterable)
- axios.spread(callback)
创建实例
您可以使用自定义配置创建 axios 的新实例.
- axios.create([config])
- var instance = axios.create({
- baseURL: 'https://some-domain.com/api/',
- timeout: 1000,
- headers: {'X-Custom-Header': 'foobar'}
- });
来源: http://www.qdfuns.com/article/40110/f068d03b6cd5b961ff6dc3a239f74d52.html