zoukankan      html  css  js  c++  java
  • axios的使用

    1.npm安装:npm install axios

    2.axios发送请求后返回的是一个promise

    3.axios发送get请求:

    import axios from 'axios';

    axios.get('http://localhost:8080/getData?username=abc&id=1').then(res=>{

      console.log(res);

    });

    参数传递另一种写法:

    import axios from 'axios';

    axios.get('http://localhost:8080/getData',{params:{id:1,username:'abc'}}).then(res=>{

      console.log(res);

    });

    4.axios发送post请求:

    import axios from 'axios';

    axios.post('http://localhost:8080/postData',"name=张三&urs=test").then(res=>{

      console.log(res);

    });

    5.axios发送并发请求,使用asios.all(),它的功能类似于promise.all():

    import axios from 'axios';

    axios.all([

      axios.get('http://localhost:8080/getData'),

      axios.get('http://localhost:8080/getData1')

    ]).then(res=>{

      console.log(res);//这里的res是一个数组,分别是每个请求的返回数据

    }).catch(err=>{

      console.log(err);

    });

    6.axios的全局配置,可以配置axios请求的baseurl,超时时间,请求头,返回数据格式等

    axios.default.baseURL="http://localhost:8080";

    axios,default.timeout = 5000;

    axios.default.headers.post['content-type']='application/x-www-form-urlencoded';

    axios.defaults.transformRequest=function(data){//返回值转化为字符串形式

     data= JSON.stringify(data);

      return data; 

    };

    7.axios的实例配置,由于在同一个项目中我们可能不只是只请求一个域名的接口,所有axios的全局配置不能解决这个问题,就需要实例配置。

    let local = axios.create({

      baseURL :"http://localhost:8080",

      timeout:5000

    });

    local.get('getData').then(res=>{

      console.log(res);

    });

    8.axios的拦截器。拦截器就是在请求发送出去之前统一拦截进行一些处理,在决定放行或者拦截。同样在服务器返回数据的时候也可以进行拦截进行处理。

    比如给请求带上token,或者判断token是否过期等。或者对服务器返回的数据进行处理等。

    let local = axios.create({

      baseURL :"http://localhost:8080",

      timeout:5000

    });

    //请求拦截器

    local.interceptors.request.use(//对local 实例做一个请求拦截,方法中第一个参数是拦截的一些配置,第二个参数是拦截错误后的处理。

      config=>{

        console.log("拦截成功,进行处理。");

        return config;//放行

      },err=>{

        console.log(err);

      }

    );

    //响应拦截器

    local.interceptors.response.use(//对local 实例做一个响应拦截,方法中第一个参数是拦截的一些配置,第二个参数是拦截错误后的处理。

      config=>{

        console.log("接受到服务器返回的数据,进行处理。");

        return config;//放行

      },err=>{

        console.log(err);

      }

    );

    9.封装axios

    如:新建request.js:

    import axios from 'axios';

    const instance = asiox.create({

      baseURL:'http://api.network.cn/admin',

      timeout:5000

    });

    //todo:这里还可以给instance添加一些拦截器的设置,比如统一添加token等

    export function get(url,params){

      return instance.get(url,{params});

    }

    export function post(url,params){

      return instance.post(url,{params});

    }

    使用封装的axios:

    import{get,post} './request.js'

    let link={

      name:'百度',

      url:'www.baidu.com'

    };

    post('/url/add',link).then(res=>{

      console.log(res);

    }).catch(err=>{

      conso.log(err);

    });

    get('/url')..then(res=>{

      console.log(res);

    }).catch(err=>{

      conso.log(err);

    });

  • 相关阅读:
    css样式兼容不同浏览器问题解决办法
    css 中input和select混排对齐问题
    盒模型详解
    css中的width,height,属性与盒模型的关系
    php中将文中关键词高亮显示,快捷方式可以用正则
    数据库面试知识
    ConcurrentHashMap原理分析(1.7与1.8)
    Docker 学习笔记
    秒杀系统架构分析与实战
    spring + redis 实现数据的缓存
  • 原文地址:https://www.cnblogs.com/maycpou/p/14673038.html
Copyright © 2011-2022 走看看