zoukankan      html  css  js  c++  java
  • axios请求、拦截器

    一、请求方式

    1、get请求

     //get请求
    // 发送 POST 请求
    axios({
      method: 'get',
      url: '/user/12345',
      
    });
    
    

    2、post请求

    // 发送 POST 请求
    axios({
      method: 'post',
      url: '/user/12345',
      data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
      }
    });
    
    

    3、request

    axios.request({
        method:'',
        url:'',
        ...
    })
    
    二、请求拦截器
    场景:在每次发送请求时,携带用户token方便后台做用户相关操作
    在每次发送请求前,都会进入请求拦截器,我们可以在此处统一绑定上想要发送的参数,则每个请求都会自动携带token
    axios.interceptors.request.use(config => {
        //config是axios配置对象
        //每次发送请求前都会进入此拦截器处理函数,可以在此处统一携带上token,每次请求都会自
        config.headers.common['token'] = localStorage.getItem(“token”);
        return config
    },err => {
        //请求出错的处理函数
        return Promise.reject(err)
    })
    
    三、响应拦截器
    场景:服务器所有接口都会返回一个错误码,比如10001,请求参数错误。 10002,用户未授权等等,我们需要在收到响应后对错误码进行相关提示。
    在每次收到响应时,都会先进入响应拦截器,在分发给各个请求函数,我们可以在此处统一先处理错误码,在进入各自的响应细节函数处理res
    axios.interceptors.response.use(function(res){
    //收到响应后,可以先统一处理错误码
    switch (res.data.code) {
           case 10001:   alert(‘非法操作’);
    router.push({path: '/});
           case 10002:  alert(‘权限不足’);
           ......
        }
        return res;
    },function(err){
        //响应出错进入的函数
        return Promise.reject(err);
    });
    
    以上就是axios拦截器的使用教程及场景.不管任何项目,只要使用的是axios发送请求,则都可以使用拦截器进行统一处理,减少冗余代码,降低二次开发及维护难度.
  • 相关阅读:
    【leetcode】Recover Binary Search Tree
    【leetcode】Dungeon Game
    【leetcode】Text Justification
    【leetcode】Largest Number
    【leetcode】Merge k Sorted Lists
    【leetcode】Reverse Nodes in k-Group
    【leetcode】Multiply Strings
    【leetcode】Unique Binary Search Trees II
    hdu 1885 bfs+状压
    hdu 1429 bfs+状态压缩
  • 原文地址:https://www.cnblogs.com/maizilili/p/12524708.html
Copyright © 2011-2022 走看看