乘风原创程序

  • Vue(九) axios
  • 2020/8/10 9:10:02
  • Axios:

    Axios是一个基于promise的HTTP库;

    引入

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    

    axios使用方法(API)

    1.axios(config)
    2.axios(url,[config])
    

    config 配置对象

    以下都是最常用的配置

    axios({
     method: 'get', // post、get、put....
      baseURL: '', // 请求的域名,基本地址
      url: '', // 请求的路径
      params: {}, // 会将请求参数拼接在url上
      data: {}, // 会将请求参数放在请求体中
      headers: {}, // 设置请求头,例如设置token等
      timeout: 1000, // 设置请求超时时长,单位:ms
    
    })
    

    使用例子看github:

    方法别名,(等同于axios([config]))

    axios.request(config)
    axios.get(url, [config])
    axios.post(url, [data], [config]])
    axios.delete(url, [config])
    axios.head(url, [config])
    axios.put(url, [data], [config])
    axios.patch(url, [data], [config]])
    axios.options(url, [config])
    

    配置默认值

    比如我们的方法里有用到相同的配置,每次都要写一次,这个时候就可以把它拿出来统一的写:
    1.全局配置:

    axios.defaults.baseURL = "https://...."
    axios.defaults.timeout = 1000;
    

    2.通过实例进行配置

    axios.create();//通过这个方法来创建实例
    //这个方法里边需要传递一个对象参数,这个参数也是我们要配置的一个对象
    eg:
    axios  create({
     baseURL:"https://....."
    })    //这个方法会返回一个实例对象,这个实例对象会像axios一样被使用,我们用一个变量接收它
    const  instance =  axios  create({
     baseURL:"https://....."
    }) 
    //但假如我们有a,b两个页面的话
    const aInstance = axios.create({
    baseURL:"https://....../a"
    })
    aInstance.get('/xxx');
    
    const bInstance = axios.create({
    baseURL:"https://....../b"
    bInstance.get('/xxx');
    })
    

    配置的优先级:
    全局<实例<请求(自己里边写的)

    并发

    比如一个大型的网站,肯定同时进行了不只一个请求,如果我们一个一个请求去写的话是不利于后期维护的。
    并发就是同时进行多个请求,并统一处理返回值。

    axios.all(iterable);
    axios.spread(callback)
    
    axios.all([
    axios.get('/a');
    axios.get('/b');
    ]).then(axios.spread((aRes,bRes)=>{
      console.log(aRes,bRes);
    }))
    

    axios拦截器

    interceptors,在发起请求之前做一些处理,或者在响应回来之后做一些处理
    拦截器分为:
    1.请求拦截器
    在这里插入图片描述

    axios.interceptors.request.use( conifg =>{
    return config;
    })
    

    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述

    2.响应拦截器
    在这里插入图片描述

    3.移除拦截器

      axios.interceptors.response.eject(添加接受拦截器的变量名字)
    

    在这里插入图片描述

    为axios实例添加拦截器

    const instance = axios.create();
    inatance.interceptors.resquest.use(config =>{})
    

    本文地址:https://blog.csdn.net/xiaochumen0707/article/details/107889628