6.axios的使用

1.axios的常用的配置参数

• baseURL:将自动加在url前面，除非url是一个绝对 URL
• timeout:请求超时时间
• headers:请求头
• method:请求方式
• url:发送请求的URL
• params:发送请求的参数，与get方式一起使用
• data：发送请求的参数，与post方式一起使用
• responseType;服务器响应的数据类型，默认为json

2.axios发送请求的示例

1.axios发送get请求

axios({
  url,
  method: 'get',
  params: {
    id: 12
  }
}).then( (res) => {
  console.log(res)
}) 

2.axios发送post请求

axios({
  url,
  method: 'post',
  data: {
    id: 12
  }
}).then( (res) => {
  console.log(res)
}) 

3.axios发送并发请求

• axios.all(iterable):放置多个请求，参数是数组
• axios.spread(callback):将多个请求结果分开处理，可以不用，直接返回一个result,通过结果下标或获取各个请求的返回结果

axios.all([
  {
    url1,
    method:'get'
  },
  {
    url2,
    method:'get'
  }
]).then(axios.spread( (res1,res2) => {
  console.log(res1);
  console.log(res2);
}));

3.对axios进行简单封装

// 对单个请求进行封装
export function request(config) {
  // 创建一个实例，并对该实例进行全局配置
  const instance = axios.create({
    baseURL,
    timeout:5000
  });

  // 由于返回本身是一个Promise，所以不需要再用promise进行封装
  return instance(config);
}

4.axios的拦截器

// 发送请求时做的拦截
axios.interceptors.request.use(config => {
  // 发送请求前做的一些事情
    /**
   * 1.请求头或数据不符合要求
   * 2.发送请求时页面要有loading图标
   * 3.发送请求时判断用户是否登录
   * 
   */
  return config; // 一定要返回回去,不然请求会直接失败
},err => {
  // 发送请求出错做一些事情
});

// 对响应进行拦截
axios.interceptors.response.use( res =>{
  // 对响应数据做些事情
}, err => {
  // 对响应错误做些事情
});