知识学堂

Knowledges

您现在的位置:  首页 >> 建站知识 >> 正文

建站知识

用axios来实现数据请求,简单易用

2018-11-09

  get请求
 
 写法如下:
 
 axios.get('/detail?id=10').then(function (res) {
 
 //成功获取数据
 
 console.log(res);
 
 }).catch(function (err) {
 
 //请求错误
 
 console.log(err);
 
 });
 
 使用过jquery的ajax方案的同学,学习axios应该没有任何难度。get请求也可以通过 params 对象传递参数。写法如下:
 
 axios.get('/detail', {
 
 //参数
 
 params: {
 
 id: 10
 
 }
 
 }).then(function (res) {
 
 //成功获取数据
 
 console.log(res);
 
 }).catch(function (err) {
 
 //请求错误
 
 console.log(err);
 
 });
 
 相比第一种写法,这种写法的可读性更高,在接口后增加一个对象参数,其中一个属性为params,它的值就是我们要传递的参数id:10。
 
 post请求
 
 写法如下:
 
 //执行post请求
 
 axios.post('/add', {
 
 name: '前端君',
 
 age: 26
 
 }).then(function (res) {
 
 //请求成功
 
 console.log(res);
 
 }).catch(function (err) {
 
 //请求失败
 
 console.log(err);
 
 });
 
 多个请求并发
 
 除了最常用的get请求和post请求以外,值得一提的是axios提供了一次性并发多个请求的API,使用方法如下:
 
 function getProfile(){
 
 //请求1
 
 return axios.get('/profile');
 
 }
 
 function getUser(){
 
 //请求2
 
 return axios.get('/user');
 
 }
 
 //并发请求
 
 axios.all([
 
 getProfile(),
 
 getUser()
 
 ]).then(axios.spread((res1, res2)=>{
 
 //两个请求现已完成
 
 console.log(res1);
 
 console.log(res2);
 
 }));
 
 我们事先定义了两个方法  getProfile()  和  getUser()  帮我们实现get请求。
 
 在某个业务场景中,我们需要同时产生以上两个get请求,并需要等待它们都请求完毕后再做逻辑处理,你也许会想到回调嵌套,但现在你可以使用axios的并发请求API: axios.all()
 
 当这两个请求都完成的时候会触发 axios.spread() 函数,res1和res2两个参数分别代表返回的结果,相当实用的API。
 
 其实上面我们刚刚讲到的 axios.get()  和  axios.post() 写法是axios给我们提供网络请求的一种别名方式,如果你不喜欢这种写法,完成可以自己通过配置请求参数,实现你想要的请求效果。
 
 举个栗子,对比一下。
 
 手动配置参数,实现一个post请求:
 
 // 发送一个 POST 请求
 
 axios({
 
 method: 'post',
 
 url: '/user',
 
 data: {
 
 name: '前端君',
 
 }
 
 });
 
 使用post别名写法,实现一个post请求:
 
 //发送一个 POST 请求
 
 axios.post('/user', {
 
 name: '前端君',
 
 })
 
 两种写法均可,大家可以根据自己的喜好和习惯,任选一种。
 
 别名写法是为了大家方便地阅读和编写代码,除了 axios.get() 和 axios.post() ,axios还为所有支持的请求方式提供了别名。
 
 axios.request()
 
 axios.delete( )
 
 axios.head( )
 
 axios.put( )
 
 axios.patch( )
 
 这些别名用法大同小异,大家需要用到的时候,可以查看axios的API文档,也十分简单。
------分隔线----------------------------