vue中axios管理http发送请求的以身作则,封装叁个得以灵活运用的ajax

By admin in 4858美高梅 on 2019年5月5日

一.原生js实现ajax请求:

正如所示:

本文介绍了vue中axios管理http发送请求的演示(Post和get),分享给大家,具体如下:

目录

  • vue中axios管理http发送请求的以身作则,封装叁个得以灵活运用的ajax。ajax简介

  • axios介绍

  • 手把手封装1个ajax

  • 卷入好的ajax特点

 步骤:

Vue.prototype.$ajax=axios; 
const CancelToken = axios.CancelToken;
let cancel;
let cancelAjaxText = '中断成功';
Vue.prototype.post = function(url,data,loading){
  var ajax = Vue.prototype.$ajax({
     method: 'post',
     url:url,
     data: data,
     cancelToken: new CancelToken(c => { //强行中断请求要用到的
     cancel = c
     })
   }).then(res =>res.data,res=>{ //中断请求和请求出错都会走这里,我这里用 cancelAjaxText 来区别
    if(res.message == cancelAjaxText){ 
     return {status : false,msg:cancelAjaxText}
    }else{
     this.$confirm('登录过时,是否重新登录', '提示', {
       confirmButtonText: '确定',
       cancelButtonText: '取消',
       type: 'warning'
     }).then(() => {
       window.location.href = Vue.prototype.url_head + '/';
     }).catch(() => {

     });
    }

   })
  return ajax;
};

axios普通话文书档案  

正篇


  get请求:

紧接 axios ,在POST方法里参预 cancelToken
数据,在上面else中,中断请求和呼吁出错都会走这里,所以用2个msg来分辨(因为接口再次回到中也有叁个msg,统壹一下);

  
axios文档

ajax简介

AJAX即“Asynchronous Javascript And
XML”(异步JavaScript和XML),在昔日,大家刷新二个页面,必供给向服务器交由二个http请求,服务器管理HTML后,把全体HTML发送到客户端,这样的一个毛病是,一:在后台实现页面传输前,用户在页面上是力不从心交互的,二:由于要求将全数HTML网页再一次传输,对服务器和带宽都带来十分大的下压力。为了缓慢解决那一个难题AJAX现身了。AJAX,他的齐全咋的1看,如同是选拔xml语言上的,单但事实ajax不仅仅在xml中采纳,也在json等数码格式中运用。使用ajax能够圆满的化解地点的主题素材,通过与后台交互页面供给更新的要素,后台只需求回到页面需求创新的多少,便可达成用户的页面交互。通过ajax,网页开启了无刷新时期。

//  1.创建一个XMLHttpRequest的对象. 
     var xml=null;  //初始值设为空
     if(XMLHttpRequest){
         xml=new XMLHttpRequest; //兼容非IE6
     }else{
         xml=new ActiveXObject('Microsoft.XMLHTTP'); //兼容IE6浏览器
     }
     //2.通过open与服务器建立连接    open(method,url,async) ; 
     //method包含 GET、POST、PUT方式。
     //第三个参数同步(false)或者异步(true)
    xml.open('GET',url,true); 
    //3.发送请求 send(string)  
    //string(参数) 仅用于post请求,GET请求不需要传参数,如果有参数直接拼接到url中。
    xml.send();
    //4.状态和响应
    xml.onreadystatechange=function(){
     //当readyState==4并且status==200时请求成功,否则请求失败
        if(xml.readyState==4&&xml.status==200){
            //请求成功
        }else{
            //请求失败
        }
    }

以下是 中断请求的章程,放在 路由切换的监听 router.beforeEach 中
,cancel 是暂停的措施,在post 的 cancelToken 里面拿出去的

在拍卖http请求方面,已经不引入应用vue-resource了,而是利用最新的axios,下边做八个简单的介绍。

axios

axios是3个ajax的包裹,是vue.js2.0过后官方推荐的ajax插件,相对于事先官方推荐的vue-resource,axios有着越来越大的适用性,不仅仅能够行使在客户端,也得以动用在服务器端,也不无更为简便易行实用的api

  2.post请求:

Vue.prototype.cancelAjax = function(){ //切换页面强行中断请求 router.beforeEach中用到 
 if(cancel){ 
  cancel(cancelAjaxText); 
 } 
} 


router.beforeEach((to, from, next) => { 
 Vue.prototype.cancelAjax()  
 next(); 
}); 

安装

手把手封装三个ajax

既然如此大家是开荒vue.js应用,对ajax的包裹理应是基于axios开辟的,在支付单页面应用中与后台交互最多的是应用post请求,大家看看官方axios的post请求API4858美高梅 1

POST请求

3个用到中设有多量的后台api,如若不加以封装,每种接口中都得写上边一大串代码,显得代码过于冗余,再开过进度中,不一致的api变化的唯有付出后台数据和api地址,那样的话我们能够因此将上面代码封装成多少个大局的不二秘技,在这么些主意中,分歧的api我们只供给传入数据和api地址便成功后台数据的交互,接下去大家初始封装好那个情势。

  • 在src目录下开创3个大局配置文件夹src/config/base.js,同时在下边配置axios的根基暗中认可配置

4858美高梅 2

config/base.js

  • 将基础配置新闻引进到src/base/service.js中定义好的post方法

4858美高梅 3

封装的post方法

  • 装进好post方法后,我们还足以打包一层请求的主意,在src/service/httpService.js中定义二个和后台交互的秘技

4858美高梅 4

后台登入方法

  • 概念好与后台交互的交互的登入方法后,在任何组件中,大家需求导入httpService的登录方法,并在回掉中收获后台再次来到的多寡,便得以做到前后台交互的机能,后台多了2个API,比如夺取用户音信,也只是在httpService.js中追加一条getUserInfo方法就足以了,从而制止写大量再次的代码。

  • 让咱们看看怎么在组件中动用封装好login方法

4858美高梅 5

在组件中调用login方法

 //步骤同 get
    var xml=null;
    var data={a:1,b:2};
    if(XMLHttpRequest){
        xml=new XMLHttpRequest;
    }else{
        xml=new ActiveXObject('Microsoft.XMLHTTP')
    }
    xml.open('POST',url,true);
    xml.send(data); //这里的data是要传递的参数 
    xml.onreadystatechange=function(){
        if(xml.readyState==4&&xml.status==200){
            //请求成功
        }else{
            //请求失败
        }
    }

调用post

使用node

结语

鉴于大家接触ajax已经有不短世间了,时间有限,便不再那篇小说解说ajax的规律等等,在此间便分享作者封装ajax的矮小经验,在此处,由于只封装了post请求,我们的小卖部支出须求分歧样,有时候会利用到get请求等等,如何封装多少个post和get都得以选取的便捷方法吧,有意思味的同室能够下方留言哟。

  二.jq实现ajax请求:

   this.post(this.ajaxUrl + 'getCrTree',{ 
    devAddr : this.changeData.devAddr, 
    innerId : this.changeData.innerId, 
   }).then(ret=>{ 
    if(ret.status){ 

    }else{ 
     this.msg(ret.msg); 
    } 
   }) 
npm install axios 

       get请求:

如上那篇vue axios 在页面切换时中断请求方法
ajax就是小编分享给大家的全部内容了,希望能给我们一个参阅,也冀望我们多多协助脚本之家。

使用cdn

       

您大概感兴趣的稿子:

  • 在Vue组件化中应用axios管理ajax请求的利用办法
  • vue使用Axios做ajax请求详解
  • VUE 更加好的 ajax 上传管理axios.js落成代码
  • 关于vue中的ajax请求和axios包问题
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
//  1.get请求
     $.ajax({
         type:"get",
         url:"",
         async:true,
         timeout:3000,  //timeout:响应超时时间,非必须参数
         beforeSend:function(){
          //这里是发送请求之前所要进行的操作
         },
         success:function(){
             //请求成功
         },
         error:function(){
            //请求失败
         }
     });

基本接纳方式

  

get请求

 post请求

// Make a request for a user with a given ID
axios.get('/user?ID=12345')
 .then(function (response) {
  console.log(response);
 })
 .catch(function (error) {
  console.log(error);
 });

// Optionally the request above could also be done as
axios.get('/user', {
  params: {
   ID: 12345
  }
 })
 .then(function (response) {
  console.log(response);
 })
 .catch(function (error) {
  console.log(error);
 });
$.ajax({
          type:"post",
          url:"",
          data:{a:1,b:2},//需要传递的参数
          async:true,
          timeout:3000,  //timeout:响应超时时间,非必须参数
          beforeSend:function(){
          //这里是发送请求之前所要进行的操作
          },
          success:function(){
              //请求成功
          },
          error:function(){
           //请求失败    
          }
       });

Post请求

  

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

  三.axios请求:

同时实行三个请求

        首先安装axios,
       方法一:npm install axios
       方法二: CDN引入 <script
src=”;  

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) {
  // Both requests are now complete
 }));

     get请求:

本条的接纳格局其实和原生的ajax是一样的,一看就懂。

   

使用 application/x-www-urlencoded 形式的post请求:

//1.get请求(无参数)
    axios.get('http://www.xxx')
    .then(function(response){
        //请求成功
    }).catch(function(erroe){
        //请求失败
    });
var qs = require('qs');
 axios.post('/bbg/goods/get_goods_list_wechat', qs.stringify({"data": JSON.stringify({
  "isSingle": 1,
  "sbid": 13729792,
  "catalog3": 45908012,
  "offset": 0,
  "pageSize": 25
 })}), {
  headers: {
   "BBG-Key": "ab9ef204-3253-49d4-b229-3cc2383480a6",
  }
 })
 .then(function (response) {
  // if (response.data.code == 626) {
   console.log(response);
  // }
 }).catch(function (error) {
  console.log(error);
 });

  

具体运用参考文书档案:

//2.get请求(有参数)
      axios.get('http://www.xxx?a=1&b=2')
        .then(function(response){
            //请求成功
        }).catch(function(erroe){
            //请求失败
        });

瞩目:
对于post请求,一般意况下,第二个参数是url,第一个参数是要发送的请求体的数量,第一个参数是对请求的安插。

  post请求:

其它:axios私下认可是application/json格式的,假使不适用 qs.stringify
那种格局, 纵然添加了请求头 最后的content-type的样式还是 json 的。

    

对此post请求,大家也足以利用上面包车型客车jquery的ajax来促成:

//必须引入qs对data进行stringify  安装axios时已经安装了qs,无需再安装,引入即可用。
    // import Qs  from 'qs'   
     let data=Qs.stringify({a:1,b:2});
     axios.post('http://www.xxx',data)
     .then(function(response){
         //请求成功
     }).catch(function(error){
         //请求失败
     })
     //4.多个请求同时发送
     function axiosOne(){
      return axios.get('http://www.url.one')    
     };
     function axiosTwo(){
      return axios.get('http://www.url.two')    
     };
    axios.all([axiosOne(),axiosTwo()])
   .then(axios.spread(function(acct, perms){
        console.log(acct);//请求一的结果;
        console.log(perms);//请求二的结果
   }))
    $.ajax({
     url:'api/bbg/goods/get_goods_list_wechat',
     data:{
      'data': JSON.stringify({
            "isSingle": 1,
            "sbid": 13729792,
            "catalog3": 45908012,
            "offset": 0,
            "pageSize": 25
          })    
     },  
     beforeSend: function(request) {
      request.setRequestHeader("BBG-Key", "ab9ef204-3253-49d4-b229-3cc2383480a6");
     }, 
     type:'post', 
     dataType:'json', 
     success:function(data){   
      console.log(data);
     },
     error: function (error) {
      console.log(err);
     },
     complete: function () {

     }
    });

  

精晓,通过比较,能够开采,jquery的呼吁方式更简便易行一些,且jqury默许的数目格式正是application/x-www-urlencoded ,从那方面来说会进一步有利一些。

别的,对于八个一样的请求,纵然都呼吁成功了,可是相互请求获得的结果也是不平等的,如下:

4858美高梅 6

一往情深看出:
使用axios重回的结果会比jquery的ajax再次来到的布局(实际的结果)多包装了1层,包蕴有关的config、
headers、request等。

4858美高梅,对此get请求, 笔者个人或然引入使用axios.get()的花样,如下所示:

 axios.get('/bbg/shop/get_classify', {
  params: {
   sid: 13729792
  },
  headers: {
   "BBG-Key": "ab9ef204-3253-49d4-b229-3cc2383480a6"
  }
 })
 .then(function (response) {
  if (response.data.code == 130) {
   items = response.data.data;
   store.commit('update', items);
   console.log(items);
  }
  console.log(response.data.code);
 }).catch(function (error) {
  console.log(error);
  console.log(this);
 });

即首先个参数是:url,
第壹个参数正是3个配置对象,大家能够在配备对象中装置 params 来传递参数。

村办知道为何get未有第壹个参数作为传递的询问字符串,而post有第一个参数作为post的数码。

因为get能够未有查询字符串,也能够get请求,可是post必供给有post的数目,要不然就从未有过利用post的画龙点睛了。

如上正是本文的全体内容,希望对我们的求学抱有帮忙,也希望大家多多援助脚本之家。

您恐怕感兴趣的篇章:

  • 涸泽而渔vue处理axios
    post请求传参的标题
  • vue resource
    post请求时遇见的坑
  • Vue
    resource中的GET与POST请求的实例代码
  • 详解Vue用axios发送post请求自动set
    cookie
  • vue中post请求以a=a&b=b
    的格式写境遇的题目

发表评论

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

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有