vue axios使用方法总结

axios 被越来越多的人所了解。本来想在网上找找详细攻略,突然发现,axios 的官方文档本身就非常详细!所以推荐大家学习这种库,最好详细阅读其官方文档。本博主在此仅仅记录一下简单的使用方法。

axios 简介

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:
  1. 从浏览器中创建 XMLHttpRequest
  2. 从 node.js 发出 http 请求
  3. 支持 Promise API
  4. 拦截请求和响应
  5. 转换请求和响应数据
  6. 取消请求
  7. 自动转换JSON数据
  8. 客户端支持防止 CSRF/XSRF

引入方式:

$ npm install axios $ cnpm install axios //taobao源 $ bower install axios 或者使用cdn: <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

举个例子:

执行 GET 请求

// 向具有指定ID的用户发出请求 axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); // 也可以通过 params 对象传递参数 axios.get('/user', { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });

执行 POST 请求

axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });

执行多个并发请求

function getUserAccount() { return axios.get('/user/12345'); } function getUserPermissions() { return axios.get('/user/12345/permissions'); } axios.all([getUserAccount(), getUserPermissions()]) .then(axios.spread(function (acct, perms) { //两个请求现已完成 }));

axios API


可以通过将相关配置传递给 axios 来进行请求。

axios(config)

// 发送一个 POST 请求 axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' } });

axios(url[, config])

// 发送一个 GET 请求 (GET请求是默认请求模式) axios('/user/12345');

请求方法别名

为了方便起见,已经为所有支持的请求方法提供了别名。
  1. axios.request(config)
  2. axios.get(url [,config])
  3. axios.delete(url [,config])
  4. axios.post(url [,data [,config]])
  5. axios.head(url [,config])
  6. axios.put(url [,data [,config]])
  7. axios.patch(url [,data [,config]])

注意

当使用别名方法时,不需要在config中指定url,method和data属性。 版权声明:除特别注明外,本站所有文章均为田珊珊个人博客原创 转载请注明:出处来自田珊珊个人博客 » vue axios使用方法总结
点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注
U乐娱乐注册