Vue.js學習第十六天——網絡請求模塊axios及項目相關

Vue.js學習第十六天——網絡請求模塊axios及項目相關

在開發項目的過程中，一定會使用到網絡請求，使用一個合適的網絡請求模塊是很重要的，不論哪一種網絡請求方式我們都需要自己封裝，防止項目代碼過於龐大不易管理，那麼選擇什麼網絡模塊開發我們後邊的項目呢？

參考一 、Ajax，ajax是基於XMLHttpRequest(XHR)，但是配置後調用該方式非常混亂，真實開發很少用，所以不推薦
參考二、 jQuery封裝好的Ajax，相對於傳統的ajax來說，使用jQuery是更有優勢的，但是這裏產生一個問題，就是我們的項目是採用Vue來寫的，在整個Vue模塊中從未使用到jQuery，意味着爲了一個網絡請求要引用上萬行的代碼，這是不必要的，所以不推薦
參考三、官方在Vue1.x推出了Vue-resource，體積相對於jQuery來說比較小，同時是官方推出的，但是在Vue2.0版本以後，Vue作者將它從Vue中去除了，並且也說不會再更新，考慮到項目的安全性和以後的維護這裏不推薦
參考四、Vue的作者在移除Vue-resource之後，推薦了一個第三方的框架，就是axios，它可以在瀏覽器中發送XMLHttpRequest請求，可以在node.js中發送http請求，這一點是jQuery做不到的，它支持Promise API，它支持攔截請求和相應，它支持轉換請求和相應數據並且支持多種請求方式，綜上，這裏我們使用axiosOMG,你還在等什麼,用它！用它！用它！

axios

---

爲了理解方便，coderwhy老師將它理解爲ajax i/o system我認爲也是非常貼切的，下面讓我們來使用一下吧
【基本使用】

1. 安裝axios框架
   npm install axios --save

2. 導入

3. 使用
   axios(config) //這裏傳入的config是一個對象，可以將配置信息傳進去
   完整代碼如下：

   import axios from 'axios'
    axios({
      url: 'http://123.207.32.32:8000/home/multidata'
    }).then(res => {
      console.log(res);
    })
   

4.注意點： axios返回的是一個Promise，這一點在後面的封裝會用到，和ajax請求相同，默認是get請求方式，若要修改可以使用axios.get(config)或是在config中指明type即可

【axios發送併發請求】
上一次我們遇到併發請求的是Peomise.all的使用，同樣，這裏也有.all方法來實現併發請求，axios.all此方法返回的是一個數組，使用如下：

axios.all([
  axios({
    url: 'http://123.207.32.32:8000/home/multidata'
  }),
  axios.get('http://123.207.32.32:8000/home/data',{
    params:{
      type:'sell',
      page: 2
    }
  }
)]).then(results => {
  console.log(results);
})

這裏瀏覽器返回的是一個數組，如下圖

我們可以在then中採用axios.spread方法直接返回兩個對象，如下：

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

這樣打印出的是這樣，兩個對象的形式

【axios全局配置】
在以上使用的過程中，我們發現地址的前部分是相同，數據的請求方式也是相同的，這些相同的東西爲了我們的簡便以及後續的可維護性上考慮，我們可以將它抽離出來，即使用全局配置
如下：

 //使用全局的axios和對應的配置在進行網絡請求
 axios.defaults.baseURL = 'http://123.207.32.32:8000'
 axios.defaults.timeout = 5000

這裏我們採用.default方法設置了一個基本的地址和瀏覽器的響應時間，在設置好了以後，就可以如下這麼寫我們的axios代碼

axios.all([
  axios({
    url: '/home/multidata'
  }),
  axios.get('/home/data',{
    params:{
      type:'sell',
      page: 2
    }
  }
)]).then(axios.spread( (res1,res2) => {
  console.log(res1);
  console.log(res2);
}))

注意點：這裏我們還可以設置其它很多東西，例如請求方式，請求報文頭中的一些信息，我們都可以將它指明，要注意的就是一旦聲明的是params那麼就要對應get請求，如果是request body中的相關參數，則要對應post請求

【axios的實例和模塊封裝】
在上面的全局配置中，我們又發現了一些問題，一旦我的網絡請求很多，而每一個url有些相同，有些不同該怎麼辦，實際上在項目開發的過程中，如果是中大型的項目開發中，會將文件存放在多個服務器上，防止併發量過大造成的服務器的過載，在服務器端就會使用反向代理服務器(nginx部署)，這在客戶端就會拿到很多的url地址，那麼怎麼解決呢，axios爲我們提供了一種解決辦法，創建對應的axios實例，不再使用全局，使用如下：

const instance1 = axios.create({
  baseURL: 'http://123.207.32.32:8000',
  timeout: 5000
});

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

最開始我們可能會感到多此一舉，但是一旦項目中使用到的網絡請求增加，並且有一些地址相同，另一些地址相同的情況下，就會感到方便很多了。

下面就可以進行模塊封裝了：
        一般情況下我們會先在src目錄下新建一個文件夾，名稱就叫network，代表用來處理網絡相關的內容，文件夾下新建一個js文件文件名可以叫request.js，在這個頁面中編寫我們所有的網絡請求的內容

1. 基本使用(傳入三個參數，對應的是三個函數)

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(data=>{
        // console.log(data);
        success(data)
    }).catch(err => {
        // console.log(err);
        failure(err)
    })
}

調用時寫的代碼，按照指定的參數傳入即可

request({
  url:'/home/data',
  params:{
    type:'pop',
    page:2
  }
},success=>{
  console.log(success)
},err => {
  console.log(err)
});

2. 傳入一個參數，其實就是傳入一個對象，對象中包含了上面的三個參數

export function request(config){
    const instance = axios.create({
        baseURL: 'http://123.207.32.32:8000',
        timeout: 5000
    });
    instance(config.baseConfig).then(res=>{
        config.success(res);
    }).catch(err=>{
        config.failure(err);
    })
}

調用時寫的代碼

request({
  baseConfig:{
    url:'/home/data',
    params:{
      type:'pop',
      page:2
    }
  },
  success(res){
    console.log(res)
  },
  failure(err){
    console.log(err)
  }
})

3. promise的使用(初期 爲了理解這個過程)

export function request(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)
        })
    })

}

調用時寫的代碼

request({
  url:'/home/data',
  params:{
    type: 'pop',
    page: 1
  }
}).then(res=>{
  console.log(res);
}).catch(err => {
    console.log(err)
})

這時我們發現，最開始的時候我們不是說過axios方法返回的不就是一個promise嗎，所以大可不必在套一層，直接return回我們的instance即可，代碼如下：

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

調用時的代碼同上一個，這樣就可以將我們處理從服務器端返回的數據和處理網絡跳轉的方法加以區分，更容易進行項目的維護

【axios攔截器的使用】
在axios中還有一個攔截器的特別我們沒有介紹，攔截器可以分爲以下2類，即攔截請求和攔截響應，這兩類又對應着攔截成功和攔截失敗的情況，下面先來看我們的攔截請求request
我們要使用到interceptors.request.use函數，具體看代碼

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

    instance.interceptors.request.use(config=>{
        console.log(config)
        return config
    },err=>{
        console.log(err)
    })
    
    return instance(config);
}

這裏我們攔截了instance的請求，我們可以對攔截的請求進行相關處理後繼續傳給服務器端進行響應，這裏有幾種用途： 1. 對不符合信息我們可以將它過濾之後再發出；2. 我們可以在他發出這個請求出先做一些加載動畫，再將它返回給服務器； 3. 在一些需要登錄才能訪問的界面我們可以先攔截請求，在檢查請求中是否含有token令牌，有的話繼續，沒有就跳轉到登錄頁面，攔截失敗的情況一般很少發生這裏就不再贅述了；
另一個攔截響應的代碼如下：

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

    instance.interceptors.response.use(res=>{
        // console.log(res)
        return res.data
    },err=>{
        console.log(err)
    })

    return instance(config);
}

這裏我們使用的是interceptors.response.use，攔截響應，具體項目中我們可以做什麼呢，就像是以上代碼的，我們可以將服務器返回的數據我們進行處理以後再返回到客戶端，這樣就方便我們的處理，響應失敗的情況比如說服務器找不到頁面發出404請求等，我們就可以將他們的錯誤信息進行一些打印

項目相關

---

這裏主要介紹一下怎麼樣進行GitHub上的託管

1. 再GitHub上點+號，新建一個項目倉庫
2. 倉庫創建好以後，複製項目的地址，輸入命令，將GitHub上的文件克隆到本地，要注意克隆下來的項目名字不要和本地的名字相同
   git clone 複製的項目地址
3. 將本地的文件拷貝到剛剛克隆的文件中，不要拷貝.git(裏面已經有了)和node_modules(這個文件拷不拷貝都一樣，配置文件中已經將它忽略)
4. 在控制檯中進入到文件目錄
   1. 輸入命令：git status查看狀態 會看到文件都是紅色
   2. git add. 添加一下文件
   3. git commit -m '一些說明信息'提交到本地
   4. git push推到倉庫中即可將它們聯繫起來

還有一個命令可以讓我們省略幾步
git remote add origin 複製的項目地址
git push -u origin master
這樣就可以直接將本地有的倉庫和遠程倉庫聯繫起來