zoukankan      html  css  js  c++  java
  • 13.vue-axios

    1、axios是一个基于promise来管理http请求得简洁、易用、高效得代码封装库
    是一个能替代ajax得,能发送http接口请求得,并且是基于promise得一个管理异步得操作

    2、特征:
    从浏览器中创建XMLHttpRequest对象
    从node中创建http请求
    支持Promise
    可以拦截请求和响应
    转换请求得数据和响应得数据
    取消请求
    自动转换json数据

    3、使用方法:

    //局部
    import axios from 'axios'
    
    
     axios('t').then(function(res){
           console.log(res.data.data)
           that.list=res.data.data
     })
    
    
    
    //全局
    import axios from 'axios'
    Vue.prototype.$http=axios
    
    
    
    his.$http('XXXXX').then(function(res){
      //       //  console.log(res.data.data)
      //         that.list=res.data.data
      // }).catch((error)=>{
      //      console.log(error.response.data+"错误数据")
      //         console.log(error.response.status+"错误状态码")
      //            console.log(error.response.headers+"错误的头部信息")
      // })


    4、需要配置得参数:
    url:路径
    method:提交方式
    data:向后台发送得数据
    axios({
    url: '',
    method: 'post/get',
    data: {} // 以对象得方式进行表示得
    }).then(function (data) {})
    then:回调函数,再这个回调函数中,处理axios返回得数据,会把返回得数据放在回调函数得参数中

    5、简写方式:
    提交方式是get:axios.get('url',{data:{}})
    提交方式是post:axios.post('url',{data:{}})
    不管是fetch也好还是axios还是ajax默认都是get请求方式
    axios('url')

    6、再vue中如果想要获取静态资源得话,必须要放在static文件夹中,否则没有办法显示,网站得图片,请求得文件

    7、对于axios来说,只要是存在返回得数据,那么这些数据都是放在返回得promise对象得data中,如果想要获取得话直接从data中进行获取即可

    8、如果axios是明文获取,直接使用get方法
    axios.get
    如果是密文获取,就直接使用post方法即可
    axios.post

    9、因为本身axios是基于promise对象想的
    then:resolve和reject两个回调函数都会在then方法中进行处理,不管是成功也好,还是失败也好,都是通过then方法进行处理得,如果是成功一般我们会直接处理数据
    失败:可以使用catch方法对异常进行捕获,捕获得错误信息都放在得是回调函数得参数中,使用response获取错误对象
    data:错误数据
    status:错误状态码
    headers:错误得头部信息

    10、axios中处理多并发使用得是all来进行处理得
    axios.all([执行第一个axios得函数(),执行第二个axios请求得函数()])

    //并发 
    
      function test () {
         return axios('static/js/index.json')
       }
       function testa () {
         return axios('static/js/index.json2')
       }
       axios.all([test(),testa()]).then(axios.spread(function(res,resa){
             console.log(res.data)
                 console.log(resa.data)
       }))
  • 相关阅读:
    带你了解数据库的“吸尘器”:VACUUM
    基于深度学习的两种信源信道联合编码
    6大创新技术及2亿美元投入计划,这个活动有点料
    MindSpore实践:对篮球运动员目标的检测
    如何正确使用Python临时文件
    一段java代码是如何执行的?
    TensorFlow csv读取文件数据(代码实现)
    TensorFlow优化器及用法
    TensorFlow损失函数
    回归算法分类,常用回归算法解析
  • 原文地址:https://www.cnblogs.com/taozhibin/p/13190677.html
Copyright © 2011-2022 走看看