axios网络模块封装

一 WHY axios

1. 在浏览器中发送XMLHttpRequests请求
2. 在nodejs中发送http请求
3. 支持Promise API
4. 拦截请求和响应
5. 转换请求和响应数据

二 axios 封装

1. /src/main.js

import Vue from 'vue'
import App from './App'
import axios from 'axios'
import {request} from './network/request'


Vue.config.productionTip = false

new Vue({
  el: '#app',
  render: h => h(App)
})

/*
//默认get请求
axios({
  url:'http://123.207.32.32:8000/home/multidata',
  method:'get'  //修改请求
}).then(res =>{
  console.log(res)
})
//或者直接使用 axios.get()  axios.post()
axios({
  //两种方式
  //url:'http://123.207.32.32:8000/home/data?type=sell&page=1',
  url:'http://123.207.32.32:8000/home/data',
  params:{
    type: 'sell',
    page: 1
  }
}).then(res =>{
  console.log(res)
})

//axios发送并发请求
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: 1
  }
})]).then(results =>{
  console.log(results);
  console.log(results[0]);
  console.log(results[1]);
})
/!* 或
})]).then(axios.spread(res1,res2) =>{
console.log(res1);
console.log(res2);
})*!/

//全局配置
axios.all([axios({
  baseURL: 'http://123.207.32.32:8000',
  timeout:5,
  url:'/home/multidata',
}),axios({
  baseURL:'http://123.207.32.32:8000',
  timeout:5,
  url:'/home/data',
})])
//有相同的配置属性可以在全局里面进行配置
axios.defaults.baseURL = 'http://123.207.32.32:8000'
axios.defaults.timeout = 5000
axios.all([axios({
  url:'/home/multidata',
}),axios({
  url:'/home/data',
})])
*/
/*
//创建实例
const ins1 = axios.create({
  baseURL:'http://123.207.32.32:8000',
  timeout:5000
})

ins1({
  url:'/home/data',
  params:{
    type: 'sell',
    page: 1
  }
}).then(res=>{
  console.log(res)
})

ins1({
  url: '/home/multidata',
}).then(res =>{
  console.log(res)
})*/
/*
request({
  url:'/home/multidata'
},res =>{
  console.log(res)
},err =>{
  console.log(err)
})

request({
  baseConfig:{

  },
  success:function(res){

  },
  failure:function(err){

  }
})
*/

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

2. /src/network/request.js

import axios from 'axios'

/*
export function request(config,success,failure){
  const ins1 = axios.create({
    baseURL:'http://123.207.32.32:8000',
    timeout:10000
  })

  ins1(config)
    .then(res =>{
      success(res); //成功则执行传来的success函数
    })
    .catch(err =>{
      failure(err)  //失败则执行传来的failure函数
    })
}
*/
/*
export function request(config){
  const ins1 = axios.create({
    baseURL:'http://123.207.32.32:8000',
    timeout:10000
  })

  ins1(config.baseConfig)
    .then(res =>{
      config.success(res);
    })
    .catch(err =>{
      config.failure(err)
    })
}*/
/*

export function request(config){
  return new Promise((resolve,reject)=>{
    const ins1 = axios.create({
      baseURL:'http://123.207.32.32:8000',
      timeout:10000
    })

    ins1(config)
      .then(res =>{
        resolve(res)
      })
      .catch(err =>{
        reject(err)
      })
  })
}
*/

export function request(config){
    const ins1 = axios.create({
      baseURL:'http://123.207.32.32:8000',
      timeout:10000
    })
    //拦截器 有4中
    ins1.interceptors.request.use(config=>{
      /*
      请求拦截的作用
      1. config中的一些信息不符合服务器的要求
      2. 每次发送网络请求时，在页面出现一个动态小圆表示正在加载
      3. 某些网络请求（如登录（token）），必须携带一些特殊信息
      * */
      console.log(config)
      return config   //得返回一个config 否则config被拦截后后面报错
    },err =>{
      console.log(err)
    })
    //响应拦截
    ins1.interceptors.response.use(res=>{
      console.log(res)
      return res.data
    },err =>{
      console.log(err)
    })


    //实例返回的其实就是一个Promise
    return ins1(config)
}