背景

JQuery时代,我们使用ajax向后台提交数据请求,Vue时代,Axios提供了前端对后台数据请求的各种方式。
什么?还不知道?还不知道就自己去补课,我默认大家都知道了。算了我是暖男,在贴一下给大家看看,下次可别忘了哈。
在这里插入图片描述

什么是Axios?

Axios是基于Promise的Http客户端,可以在浏览器和node.js中使用。

为啥使用Axios?

Axios非常适合前后端数据交互,另一种请求后端数据的方式是vue-resource,vue-resource已经不再更新了,且只支持浏览器端使用,而Axios同时支持浏览器和Node端使用。

Vue开发者推荐使用更好的第三方工具,这就是Axios

安装

你可能会说,概念我知道了,第三方工具怎么在Vue中安装使用呢?
emm = = 安排
在这里插入图片描述

npm安装

npm install axios --save
bower install axios --save

直接script标签引用

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

ES6 import引用

因为axios不是vue的插件,所以不能直接用use方法,需要将其加载到原型上。

import axios from 'axios'
axios.get();

全局配置

如果要全局使用axios就需要在main.js中设置成全局的,然后再组件中通过this调用

Vue.prototype.$axios = axios;

this.$axios.get();

使用

发送一个最简单的GET请求

这里我们发送一个带参数的get请求,params参数放在get方法的第二个参数中,如果没有参数get方法里可以只写路径。如果请求失败捕获一下异常。

axios
  .get('http://rap2api.taobao.org/app/mock/23080/resources/search',{
      params: {
         id: 5
      }
   })
  .then(res => {
    console.log('数据是:', res);
  })
  .catch((e) => {
    console.log('获取数据失败');
  });

发送一个POST请求

当然,我们也可以发送一个POST请求,post方法的第二个参数为请求参数对象。

this.$axios.post('http://rap2api.taobao.org/app/mock/121145/post',{
name: '小月'
})
.then(function(res){
console.log(res);
})
.catch(function(err){
console.log(err);
});

一次合并发送多个请求

分别写两个请求函数,利用axios的all方法接收一个由每个请求函数组成的数组,可以一次性发送多个请求,如果全部请求成功,在axios.spread方法接收一个回调函数,该函数的参数就是每个请求返回的结果。

function getUserAccount(){
  return axios.get('/user/12345');
}
function getUserPermissions(){
  return axios.get('/user/12345/permissions');
}
this.$axios.all([getUserAccount(),getUserPermissions()])
  .then(axios.spread(function(res1,res2){
    //当这两个请求都完成的时候会触发这个函数,两个参数分别代表返回的结果
}))

求职必备刷题官网:https://github.com/bennyrhys/interview
【更多互联网公司笔试面试真题请关注“让我遇见相似的灵魂”公众号】

Logo

前往低代码交流专区

更多推荐