axios

一、基础用法

axios是基于promise的网络请求库，所以我们可以在then里面处理请求成功之后的操作，在catch中处理失败的操作。

• method（默认为get请求）

axios({
  url:'xxxx',
  method:'get'//也可以设置为post
}).then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
})

• get带参数

// 专门针对get请求的参数拼接
axios({
  url:'xxxx',
  params:{
    type:'pop',
    page:1
  }
}).then(res => {
  console.log(res);
})

• post带参数，参数需放在data中

axios({
  url:'xxxx',
  method:'post',
  data:{
    page:1
  }
}).then(res => {
  console.log(res);
})

• 还可有以下设置

  
  26DD69E2BD931511FB98CC3C36D35F3A.png

• 并发请求

axios.all([axios({
  url: 'xxxx'
}), axios({
  url: 'xxxx',
  params: {
    type: 'pop',
    page: 1
  }
})]).then(arr => {
  console.log(arr);
})

注：上面的arr是一个数组，为两个请求的结果。
也可以写成下面这种方式：主要是对请求结果所对应的数组的改动。

axios.all([axios({
  url: 'xxxx'
}), axios({
  url: 'xxxx',
  params: {
    type: 'pop',
    page: 1
  }
})]).then(axios.spread((res1,res2) => {
  console.log(res1);
  console.log(res2);
}))

二、封装

为什么要输出一个实例？

因为我们在开发的工程当中，有时候不只有一个baseURL，在不同的接口请求中可能是对不同的服务器请求数据，类似于baseURL、timeout等全局配置就不能写死；所以这里输出一个实例，我们针对不同实例设置我们想要的配置就可以了。

export function request(config,success,failure){
  // 1、创建axios实例
  const instance = axios.create({
    baseURL:'xxxx',//服务器域名
    timeout:5000
  })
  //发送真正的网络请求
  instance(config).then(res => {
    success(res)
  }).catch(err => {
    failure(err)
  })
}

//---------------用法为----------------
import {request} from './network/request.js'
request({
  url:'xxxx'
},res => {
  console.log(res);
},err => {
  console.log(err);
})

也可以这样写

export function request(config){
  // 1、创建axios实例
  const instance = axios.create({
    baseURL:'xxxx',
    timeout:5000
  })
  //发送真正的网络请求
  instance(config.baseConfig).then(res => {
    config.success(res)
  }).catch(err => {
    config.failure(err)
  })
}

//---------------用法为----------------
request({
  baseConfig:{
    url:'xxxx'
  },
  success:function(res){
    console.log(res);
  },
  failure:function(err){
    console.log(err);
  }
})

还可以这么写（比较推荐使用这种方法）

export function request(config){
    const instance = axios.create({
      baseURL:'xxxx',
      timeout:5000
    })
    return instance(config)
}
//---------------用法为----------------
request({
  url:'xxxx'
}).then(res => {
  console.log(res);
}).catch(kzp => {
  console.log(kzp);
})

三、拦截器

export function request(config){
    const instance = axios.create({
      baseURL:'xxxx',
      timeout:5000
    })
    //请求成功/失败---config中的一些信息不符合服务器要求
    //每次发送网络请求的时候，界面上显示一个请求的图标
    //某些网络请求（比如登录）,必须携带一些特殊的信息
    //请求拦截
    instance.interceptors.request.use(aaa => {
      console.log(aaa,'---------------');
      return aaa//拦截了，这里要原封不动的返回
    },err => {
      return err
      console.log(err);
    })

    // 响应拦截
    instance.interceptors.response.use(res => {
      console.log(res,'++++++++++++');
      return re.data
    },err => {
      return err
      console.log(err);
    })
    return instance(config)
}

拦截器大体可分为两种：一种为请求拦截器；一种为响应拦截器。

• 请求拦截器的用处或者说使用场景：设置请求头、处理统一的请求数据、发送请求时展示请求图标、特殊请求（比如登录）必须携带特殊信息，否则跳转特殊页面等。
• 响应拦截器的用处或者说使用场景：根据状态码做统一的提示信息，整理响应数据等。

注：记得在then()和catch()中return，不然在使用的地方是没有结果的。