axios

// axios的基本使用
// axios({
//   url: 'http://123.207.32.32:8000/home/multidata',
//   method: 'get',//其实不写就是get方式
// }).then(res => {
//   console.log(res);
// })

// axios({
//   url: 'http://123.207.32.32:8000/home/data',
//   //专门针对get请求的参数拼接
//   params: {
//     type: 'sell',
//     page: 3,
//   }
// }).then(res => {
//   console.log(res);
// })
// 2.axios的发送并发请求，即两个请求都success才会做后面的处理
axios.all([ 
  axios({
    url: 'http://123.207.32.32:8000/home/multidata'
  }),
  axios({
    url: 'http://123.207.32.32:8000/home/data',
    params: {
      type: 'sell',
      page: 3,
    }
  })
]).then(results => { //results被传入了结果数组
  console.log(results);
}).catch(() => {
  console.log('err');
})

// 全局配置
axios.defaults.baseURL="http://123.207.32.32:8000";
axios.defaults.timeout = 5000; //5秒超时
axios.all([ 
  axios({
    url: '/home/multidata'
  }),
  axios({
    url: '/home/data',
    params: {
      type: 'sell',
      page: 3,
    }
  })
]).then(results => { //results被传入了结果数组
  console.log(results);
}).catch(() => {
  console.log('err');
})

get请求 :params:{id : 12},
post 请求 (request body) data:{key:‘aa’}

• axios的实例和模块化封装

const instance1 = axios.create({
  baseURL:'http://xx',
  timeout: 5000
})
instance1({
  url:'/home/multidata'
}).then(res => {
  console.log(res); 
})
instance1({
  url:'/home/data',
  params:{
    type:'sell',
    page:1,
  }
}).then(res => {
  console.log(res);
})

// network/require.js
import axios from 'axios'
export function request(config,success,failure){
  const instance = axios.create({
    baseURL:'http://xx',
    timeout:5000
  })
  instance(config)
    .then(res => {
      success(res)
    })
    .catch(err => {
      failure(err)
    })
}

main.js

import {request} from './network/require';
request({
  url:'/home/multidata'
},res =>{
  console.log(res);
},err =>{
  console.log(err);
})

import axios from 'axios'
const instance = axios.create({
  baseURL:'http://xx',
  timeout:5000,
})
export function request(config) {
	//发送真正网络请求组
// 浏览器请求时的拦截器：第一个参数是请求成功时回调，第二个参数是请求失败时回调
  instance.interceptors.request.use(config => {
    // console.log(config);
    //1.比如config中的一些信息不符合服务器的要求

    //2.比如每次发送网络请求时，都希望在界面中显示一个请求的图标

    //3.比如某些网络请求(比如登录(token))，必须携带一些特殊的信息
    return config; //拦截后要返回config,否则无法执行后面的代码
  },err =>{})

  //服务器响应时的拦截器：
  instance.interceptors.response.use(res =>{
    console.log(res);
    return res.data; //记住拦截后要返回，否则后面代码无法执行
  },err => {
    console.log(err);
  })
    return instance(config) //返回一个Promise
}


main.js
request({
  url:'/home/multidata',
}).then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
})

axios的拦截器（4种情况）

• 请求失败和成功，相应失败和成功都可以拦截