在Vue.js中使用 axios 访问 API，与后台进行交互

1、axios的介绍、作用

Axios 是一个基于 promise 的 HTTP 库，那这里promise是什么东西？以下是promise的个人理解：promise是一个对象用来传递异步操作的信息，它代表了某个未来才会知道结果的事件（通常是一个异步操作），并且这个事件提供统一的api，可供进一步的处理。promise的作用：Promise的出现主要是解决地域回调的问题，比如你需要结果需要请求很多个接口，这些接口的参数需要另外那个的接口返回的数据作为依赖，这样就需要我们一层嵌套一层，但是有了Promise 我们就无需嵌套。promise的本质是什么：分离异步数据获取和业务。axios的请求头默认为'application/json'，即axios会默认序列化 JavaScript 对象为 JSON。

axios 功能

浏览器端发起XMLHttpRequests请求
node层发起http请求
支持Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF（跨站请求伪造）

2、axios的安装配置

安装

npm install axios // 安装的插件都是放在node_modules中的

配置

在src/main.js配置 axios，加入如下两行代码：

import axios from 'axios'

Vue.prototype.$axios= axios //将axios全局挂载到VUE原型上。因为很多组件都需要请求数据，每用一次导入一次很麻烦，全局配置之后就不用在组件中导入了。就能直接在组件的 methods 中使用 $axios命令。这里的$axios可以换成别的，比如$a、$b都可以。只是调用的时候注意用对应名称即可，比如this.$axios、this.$a

3、axios - get请求写法

写在对应的组件（即在components文件夹下的*.vue文件）的<script>脚本内：

暂时无法显示

上图没有涉及到传参，如果get传参的话，有两种方式：

1、直接附在url后

axios.get('/user?ID=12345')
  .then(response => {     //箭头函数
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

2、使用params对象进行传参

axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then( response =>  {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

4、axios - post请求写法

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

5、axios - 执行多个并发请求

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) {
    //两个请求现已完成
  }));

任意名

发布了48 篇原创文章 · 获赞 35 · 访问量 8万+

私信关注