對於 axios api 我想大家已經用過很多次了。在本文中，我列出了一些常用的 axios api 請求的語法，在你可能忘記 api 的時候可以翻出來檢視，而不是在舊的專案中尋找之前使用過的請求語法。

1. 安裝引用

安裝：npm install axios

引入：import axios from 'axios'

2. 使用axios傳送簡單get請求

// 如果沒有指明請求方式，則預設的是GET
axios('/user/12345').then(res => console.log(res))

3. 在get請求中使用查詢字串資料

axios
    .get('/user?ID=12345')
    .then(res 
 
=> console.log(res))
    .catch(err => console.log(err))

4. 使用可配置的方式傳送get請求

axios
    .get('/user', {
        params: { // params是作為與請求一起傳送的URL引數，常用於get請求，在params中的屬性都會以key=value的格式pin在url中
            ID: 12345
        }
    })
    .then(res => console.log(res))
    .catch(err => console.log(err))

5. 使用async/await方式傳送get請求

async function getUser() {
    try {
        const res = await axios.get('/user?ID=12345');
        console.log(res);
    } catch (err) {
        console.error(err);
    }
}

6. 使用axios傳送簡單post請求

axios
    .post('/user', {
        firstName: 'Fred',
        lastName: 'Flintstone'
    })
    .then(res 
 
=> console.log(res))

7. 使用axios傳遞配置來發送post請求

axios({
    method: 'post',
    url: '/user/12',
    data: { // data是作為請求主體被髮送的資料，只適用於put/post/patch這些請求方式
        firstName: 'Fred',
        lastName: 'Flintstone'
    }
});

8. 使用axios同時傳送多個請求（併發請求）

function getUserAccount() {
　　return axios.get('/user/12345');
}
​
function getUserPermissions() {
　　return axios.get('/user/12345/permissions');
}
​
Promise
    .all([getUserAccount(), getUserPermissions()])
    .then(
        axios.spread((res1, res2) => {
            // 兩個請求都執行完成
            console.log(res1, res2)
        })
    )

9. axios的全域性預設設定

如設定baseURL，超時時間，新增token等，該設定會在之後的每次請求中生效

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded'; // 這個格式下，傳送資料的格式是FormData格式

10. 設定axios請求攔截器

axios.interceptors.request.use(
    config => {
        // 在請求傳送之前做一些處理，比如引數序列化
        if(config.method === 'post') {
            // axios預設提交使用的是application/json格式，
            // 這就需要我們傳遞的引數是序列化之後的json字串
            config.data = JSON.stringify(config.data)
            
            // 如果content-type是application/x-www-form-urlencoded格式，則：
            // config.data = qs.stringify(config.data)
        }
        return config // 有且僅有一個config物件被返回
    },
    error => {
        // 在請求出現錯誤時做一些處理
        return Promise.reject(error)
    }
)

11. 移除攔截器

let myInterceptor = axios.interceptors.request.use(/*...*/)
axios.interceptors.request.eject(myInterceptor)

12. 設定axios響應攔截器

axios.interceptors.response.use(
    response => {
        // 對響應的資料進行一些處理，比如返回狀態碼的判斷
        const { status, statusText } = response
        if(status === 200) return Promise.resolve(response)
        return response; // 有且僅有一個response物件被返回
    },
    error => {
        // 對返回的錯誤進行一些處理
        return Promise.reject(error);
    }
);

13. 在響應攔截器中新增超時後的處理

axios.interceptors.response.use(
    res => {
        return res;
    },
    error => {
        const { code, message, response } = error
        if(code === 'ECONNABORTED'|| message === 'Network Error' || message.includes('timeout') > -1) {
            // 超時的異常處理
            console.log('超時')
        }
        if (response) {
            const { status } = response
            switch (status) {
                case 500:
                    .....
                    break;
                case 404:
                    .....
                    break;
            }
        }
        return Promise.reject(error);
    }
);

也可以在超時後重新請求，並設定請求次數和請求間隔時間，具體可以參看：

https://github.com/axios/axios/issues/164#issuecomment-327837467

14. 自定義設定並建立一個axios例項

let config = {
    baseURL: 'http://xxxx.com', // 如果url不是絕對地址，baseURL會pin在url前面
    timeout: 6 * 1000, // 超時時間，如果請求超過該時間，請求將會中斷
    headers: { // 要傳送的請求頭
        'X-Requested-with':'XMLHttpRequest',
        'Content-Type': 'application/json; charset=UTF-8',
        'Access-Control-Allow-Origin': '*',
        token: '....'
    }
};
​
const _axios = axios.create(config);
​
// 在例項中使用攔截器
_axios.interceptors.request.use(/*...*/);

15. 處理axios的響應結果

一個請求的響應一般包含如下資訊：

{
    config: {}, // 獲取當前請求提供的配置資訊
    data: {}, // 服務返回的響應資料
    headers: {}, // 伺服器端的響應頭
    request: {}, // 獲取當前響應的請求資訊
    status: 200, // 伺服器返回的http狀態碼，比如常見的200/OK
    statusText: 'OK'// 伺服器返回的http狀態資訊   
}

axios
    .get('/user?ID=12345')
    .then(res => {
        // 對響應結果res進行一些處理
        console.log(res)
    })
    .catch(err => console.log(err))