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)
       }))
  • 相关阅读:
    Spring(7)AOP的相关概念(二)
    Spring(6)AOP的相关概念(一)
    Spring(5)基于注解的IOC配置
    Spring(4)使用 Spring的IoC的实现增删该查
    Spring(3)使用 spring 的IOC解决程序耦合
    Oracle体系结构概述(一)
    Spring(2) IoC 的概念和作用
    Spring(1)Spring概述
    Mybaits(15)注解开发
    Mybaits(14)存储过程
  • 原文地址:https://www.cnblogs.com/taozhibin/p/13190677.html
Copyright © 2011-2022 走看看