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)
}