vue2.0版本使用axios发送请求

最新推荐文章于 2024-05-05 20:40:59 发布

qq_39355295

最新推荐文章于 2024-05-05 20:40:59 发布

阅读量549

点赞数

分类专栏： vue

原文链接：https://www.cnblogs.com/zhouyangla/p/6753673.html

版权

vue 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

注意：在Vue1.0的时候有一个官方推荐的 ajax 插件 vue-resource，但是自从 Vue 更新到 2.0 之后，官方就不再更新 vue-resource。
目前主流的 Vue 项目，都选择 axios 来完成 ajax 请求，下面来具体介绍一下axios的使用。
axios 基本介绍
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：

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

在日常的vue项目开发中，推荐使用npm的安装方式：

$ npm install axios
//方式一：使用淘宝源（推荐）
$ cnpm install axios
//方法二：使用cdn：
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

备注： axios并不是vue插件
我们在引入 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) {
    //两个请求现已完成
  }));

================================================================
具体进阶详细信息见如下链接：
https://www.cnblogs.com/zhouyangla/p/6753673.html