爲何選擇axios?

最重要的一個緣由是，vue的做者推薦使用，再一個這個框架配合vue確實很棒！

功能特色：

• 在瀏覽器中發送XMLHttpRequests請求
• 在node.js中發送http請求
• 支持Promise API
• 攔截請求和響應
• 轉換請求和響應數據

支持多種請求方式：

• axios(config)
• axios.request(config)
• axios.get(url, [, config])
• axios.delete(url, [, config])
• axios.head(url, [, config])
• axios.post(url, [,data[,config] ])
• axios.put(url, [,data[,config] ])
• axios.patch(url, [,data[,config] ])

基本使用：

• 默認爲get請求

const homeUrl = 'http://123.207.32.32:8000/home/multidata'
axios({
    url: homeUrl,
    method: 'get',   // 這裏若是不定義則默認爲get請求
}).then(res => {
    console.log(res);
})
複製代碼

• 專門針對get請求拼接url？後邊的參數,傳入params:{}

axios({
    url: https://store.crmeb.net/api/pc/get_category_product,
    method: 'get',
    // 專門針對get請求拼接url？後邊的參數
    params: {
        page: 1,
        limit: 3,
    }
}).then(res => {
    console.log(res.data);
})
複製代碼

併發請求

開發過程當中，同時發送兩個請求，而且請求的數據一塊兒到達後，再繼續後續的工做的方式叫作併發請求，也就是一次請求多個接口（我的理解！）

axios併發請求, 使用all方法，all方法要求傳入的是一個數組，每一個數組的值能夠爲一次請求,以後在all方法外層直接.then()便可合併兩次請求,返回的結果爲一個數組

axios.all([
    axios({
        url: 'https://store.crmeb.net/api/pc/get_products',
        params: {
            page: 1,
            limit: 20,
            cid: 57,
            sid: 0,
            priceOrder: '', 
            news: 0,
        }
    }),
    axios({
        url: 'https://store.crmeb.net/api/pc/get_company_info',
    })
]).then(results => {
    console.log(results)
})
複製代碼

若是你想自動把這個數組展開的話在then()方法中傳入axios.spread()方法便可，以下所示：

axios.all([
    axios({
        url: 'https://store.crmeb.net/api/pc/get_products',
        params: {
            page: 1,
            limit: 20,
            cid: 57,
            sid: 0,
            priceOrder: '', 
            news: 0,
        }
    }),
    axios({
        url: 'https://store.crmeb.net/api/pc/get_company_info',
    })
    // 箭頭函數一個參數能夠省略小括號(),多個參數則不能省略
]).then(axios.spread((res1, res2) => {
    console.log(res1);
    console.log(res2);
}))
複製代碼

小知識點：

• 對象解構

const obj = {
	name: 'lotdoc',
    age: 30
}
// 解構
const {name, age} = obj;
複製代碼

• 數組解構

const names = ['劉德華', '張學友', '黎明', '郭富城']
// 下標解構
const name1 = names[0]
.
.
// 數組解構
const [name1, name2, name3, name4] = names
複製代碼