vue2.0项目实战(3)使用axios发送请求

转载 (原文地址) 方本领 随笔 vue 593阅读 2018-01-30 11:06:53 举报

在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>;
安装其他插件的时候,可以直接在 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'}
});

评论 ( 1 )
最新评论
zxsclq 2018-02-05 15:35:38 1F

应该顺带讲一下axios封装~哈哈