Vue中為什么使用 + axios詳解

1、Vue中選擇什么網絡模塊？

Vuex中發送網絡請求有非常多的方式

1）傳統的Ajax是基於XMLHttpRequest(XHR)

為什么不使用？

配置和調用方式非常混亂，所以在開發中很少使用，而是使用 jquery-ajax

 

2）jquery-ajax

為什么不使用？

首先我們需要明確一點，在vue的整個開發中是不需要使用 jquery的，

那么意味着為了方便我們進行一個網絡請求，特意引入一個重量級的框架jquery,得不償失

 

3）axios

axios有非常多的優點，並且使用起來也非常的方便

2、axios框架的基本使用

axios({
  url: 'http://123.207.32.32:8000/home/mutidata'
  //method: 'get'/'post'
}).then(res => {
  console.log(res)
})

//axios的get請求
//1) 參數直接跟在url上
axios({
  url: 'http://123.207.32.32:8000/home/mutidata'
}).then(res => {
  console.log(res)
})

//2) 多個參數放在url中
axios({
  url: 'http://123.207.32.32:8000/home/data',
  params: {
    type: 'pop',
    page: 1
  }
}).then(res => {
  console.log(res)
})

//3、使用axios.get - 參數寫在url中
axios.get('http://123.207.32.32:8000/home/mutidata')
.then(res=>{
  console.log(res)
})

//4、使用axios.get - 參數寫在params中
axios.get('http://123.207.32.32:8000/home/data',
  {
    params: {
      type: 'pop',
      page: 1
    }
  }).then(res => {
    console.log(res)
})

 

3、axios發送並發請求

//axios發送並發請求
//axios.all([axios(),axios()]).then(res => {})
// res是一個數組，包含每條請求的結果
axios.all([axios({
  url: 'http://123.207.32.32:8000/home/mutidata'
}),axios({
  url: 'http://123.207.32.32:8000/home/data',
  params: {
    type: 'pop',
    page: 1
  }
})])
  .then(res => {
    console.log(res);
    console.log(res[0]);
    console.log(res[1]);
  })

解析結果，對結果進行一層處理：

axios.all([axios({
  url: 'http://123.207.32.32:8000/home/mutidata'
}),axios({
  url: 'http://123.207.32.32:8000/home/data',
  params: {
    type: 'pop',
    page: 1
  }
})])
  .then(axios.spread((res1,res2) => {
    console.log(res1);
    console.log(res2);
}))

 

4、axios的配置信息相關

事實上，在開發中很多參數是固定的，這個時候我們可以進行一些抽取，也可以利用axios的全局配置

axios.defaults.baseURL = 'http://123.207.32.32:8000'
axios.defaults.timeout = 5000
axios.get('/home/data',
  {
    params: {
      type: 'pop',
      page: 1
    }
  }).then(res => {
  console.log(res)
})

常見的配置選項：

 

5、axios的實例和模塊封裝

1）為什么要創建axios的實例？

當我們從axios模塊中導入對象時，使用的實例是默認的實例

當給該實例設置一些默認的配置是，這些配置就被固定下來了

但是在后續的開發中，某些配置又可能不太一樣，比如某些請求需要使用特定的baseURL，timeout或者content-Type 等

這個時候，我們可以創建新的實例，並且傳入該實例的配置信息

 

2）如何創建axios的實例？

//創建對應的 axios 的實例
const instance1 = axios.create({
  baseURL: 'http://123.207.32.32:8000',
  timeout: 5000
})

instance1({
  url: '/home/multidata',
}).then( res => {
  console.log(res);
})

 

3）為什么要進行模塊封裝？

減少項目各個文件處對第三方框架的依賴，當需要替換框架時，只需要修改你自己封裝的文件

，非常方便

 

4）如何封裝 axios請求

第一種方式：傳入成功和失敗的回調函數

封裝 request.js

import axios from "axios";

export function request(config,success,failure) {
  //1、創建axios的實例
  const instance = axios.create({
    baseURL: 'http://123.207.32.32:8000',
    timeout: 5000
  })

  //發送真正的網絡請求
  instance(config).then(
    res => {
      success(res); //成功的回調函數
    }
  ).catch(err => {
    failure(err); //失敗的回調函數
  })
}

調用

//5、封裝request模塊
import {request} from "./network/request";

request({
  url: "/home/mutidata"
},res=>{
  console.log(res);
},err => {
  console.log(err);
})

 

第二種方式：使用Promise

//使用 promise 進行封裝
export function request(config,success,failure) {
  //1、創建axios的實例
  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); //失敗的回調函數
    })
  })
}

 

第三種方式：直接返回 instance(config)

export function request(config,success,failure) {
  //1、創建axios的實例
  const instance = axios.create({
    baseURL: 'http://123.207.32.32:8000',
    timeout: 5000
  })

  return instance(config);
}