axios的使用和封裝

發送請求有幾種方式：

•  Ajax是基於XMLHttpRequest，配置調用麻煩

•  JQuery-Ajax，不使用jQuery框架會得不償失

• axios：

  l  游覽器中發送XMLHttpRequest請求

  l  在node.js中發送http請求

  l  支持PromiseAPI

  l  攔截請求和響應

  l  轉換請求和響應數據...

使用：

1. 直接引入的axios對象，是默認的全局對象，可直接發送請求。缺點：如果多個組件都需要發送請求，且請求的配置等路徑參數不唯一，則維護起來麻煩。耦合性太高

// 設置全局默認配置
axios.defaults.baseURL = 'http://123.207.32.32:8000'
axios.defaults.timeout = '5000'

// 這里使用的是默認全局axios對象
axios({
   baseURL: 'http://123.207.32.32:8000',
   url: '/home/multidata',
   method: 'get'
}).then(res => {
   console.log(res)
})

　　2. 如有多個請求需要完成后統一執行下一步，則可使用axios全局對象的all方法

// 同時有多個請求，且請求完成后再執行，則使用all方法
axios.all([
  axios({
    url: '/home/multidata'
   }),
  axios({
    url: '/home/data',
    params: {
      type: 'pop',
      page: '3'
    }
  })
]).then(res => {
  console.log(res)
})

封裝axios對象:

　　1. 推薦先創建個文件夾network，在其下創建request.js文件。里面封裝axios對象

// axios文件
//可能存在多個實例，導出function類型
// 傳遞兩個參數
export function instance1(config, success){
  const instance = axios.create({
    baseURL: 'http://123.207.32.32:8000',
    timeout: '5000'
  })
  instance(config).then(res => {
    // 回調到組件中處理請求數據
    success(res)
  })
}
export function instance2(){
  
}

// 組件引用封裝的axios
// 傳遞兩個參數，第二個參數是函數用來回調，config、success()
instance1({
   url: '/home/data'
 }, res => {
   this.msg = res
   console.log(res)
})

　　2. 也可使用Promise對象方法返回

// 使用Promise對象請求數據的方案
export function instance1(config){
  return new Promise((resolve, reject) => {
    const instance = axios.create({
      baseURL: 'http://123.207.32.32:8000',
      timeout: '5000'
   })
    instance(config)
    .then(res => {
      resolve(res)
    })
   .catch(err => {
      reject(err)
    })
  })
}

　　3. 從源碼來看，因為axios.creat()方法返回的就是Promise類型，則可以直接返回

// 最終封裝結果
export function instance1(config){
  const instance = axios.create({
    baseURL: 'http://123.207.32.32:8000',
    timeout: '5000'
  })
  // 因為instance返回是Promise類型，可直接返回回調函數
  return instance(config)
}