zoukankan      html  css  js  c++  java
  • vue 如何发起网络请求 之 axios

     

    1
     
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // axios 请求  在main.js里边写入
    import Axios from 'axios'
     
    // 配置请求信息
    var $http = Axios.create({
      baseURL: '配置路径',
      timeout: '3000',  //超时时间
      headers: {'X-Custom-Header''foobar'}  //请求头
    })
    Vue.prototype.$http = $http
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    // 方法调用,回调,post , 基于es6 promise
      methods: {
        getNum: function() {
          var data = { TenantID: "0"}
          this.$http.post("请求路径-方法1", data ) .then(res => {
              console.log(res) //返回方法1的值
                    var data1 =  { TenantID: res.data.Code } //方法1 的返回值作为参数传递 res.data.Code
                    this.$http.post("请求路径-方法2", data1 )
                    .then(res1 => {
                        console.log(res.data) //同样可以使用方法1的返回值
                        console.log(res1)  //返回方法2的值
                    })
                })
                .catch(function(error) {
                    console.log(error)
            })
        }
    //需要使用箭头函数,否则 this.$http 中的this 指向window,会报 $http undefined
    //另外也可以在当前组件 import axios from 'axios'  引入axios 包
    //将 this.$http 替换 为 axios  结果一样

      

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    axios 拦截器
     
    你可以截取请求或响应在被 then 或者 catch 处理之前
     
    //添加请求拦截器
    axios.interceptors.request.use(function(config){
         //在发送请求之前做某事
         return config;
       },function(error){
         //请求错误时做些事
         return Promise.reject(error);
       });
      
    //添加响应拦截器
    axios.interceptors.response.use(function(response){
         //对响应数据做些事
         return response;
       },function(error){
         //请求错误时做些事
         return Promise.reject(error);
       });<br>
    以后可能需要删除拦截器。
    var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
    axios.interceptors.request.eject(myInterceptor);<br>
    你可以将拦截器添加到axios的自定义实例。
    var instance = axios.create();
    instance.interceptors.request.use(function () {/*...*/});<br>
    处理错误
    axios.get('/ user / 12345'
       .catchfunction(error){
         if(error.response){
           //请求已发出,但服务器使用状态代码进行响应
           //落在2xx的范围之外
           console.log(error.response.data);
           console.log(error.response.status);
           console.log(error.response.headers);
         else {
           //在设置触发错误的请求时发生了错误
           console.log('Error',error.message);
         }}
         console.log(error.config);
       });
    您可以使用validateStatus配置选项定义自定义HTTP状态码错误范围。
     
    axios.get('/ user / 12345',{
       validateStatus:function(status){
         return status < 500; //仅当状态代码大于或等于500时拒绝
       }}
    })
  • 相关阅读:
    类 2020年8月19
    随便一写,明天改正
    os模块 2020年8月16
    time 模块 2020年8月16
    collections模块 2020年8月16
    正则跟re模块内容2020年8月16日
    【C++设计模式二】C++工厂模式
    【C++设计模式一】C++简单工厂模式
    【01-springmvc快速入门、组件解析】
    03-【Spring 的 AOP】
  • 原文地址:https://www.cnblogs.com/gluncle/p/9382036.html
Copyright © 2011-2022 走看看