怎樣在vue項目中使用axios處理接口請求

vue項目中使用axios處理后端接口請求，參考摘錄自axios官方文檔

1、axios插件包安裝

npm install axios --save

2、在main.js中全局引入axios

因為axios不是為了vue寫的插件(插件內要處理)不支持vue.use()加載方式，為方便使用，可以將其掛載在vue原型上；全局使用this.$axios

import axios from 'axios'
Vue.prototype.$axios = axios

3、axios基本使用方法,axios請求返回的是一個promise對象

let api = 'http://'
this.$axios.post(api, {userId: '57393746696202243'}).then((response) => {
    console.log(response)
})

4、也可以通過向 axios 傳遞相關配置來創建請求

let curBaseURL = 'http://'
let sUrl = 'api/login'
this.$axios({
        method: 'post',  // 請求方法-post/get(default)...
        url: sUrl,
        // `baseURL` 將自動加在 `url` 前面，除非 `url` 是一個絕對 URL。它可以通過設置一個 `baseURL` 便於為 axios 實例的方法傳遞相對 URL
        baseURL: curBaseURL,
        // `headers` 是即將被發送的自定義請求頭
        headers: {
          'W-SEQ': 'default'
        },
        // `params` 是即將與請求一起發送的 URL 參數
        // 必須是一個無格式對象(plain object)或 URLSearchParams 對象
        params: {
          // ID: 12345
        },
        // 只適用於這些請求方法 'PUT', 'POST', 和 'PATCH'
        // 在沒有設置 `transformRequest` 時，必須是以下類型之一：
        // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
        // - 瀏覽器專屬：FormData, File, Blob
        // - Node 專屬： Stream
        data:{
          userId: '57393746696202243'
        },
        // `timeout` 指定請求超時的毫秒數(0 表示無超時時間)
        // 如果請求話費了超過 `timeout` 的時間，請求將被中斷
        // timeout: 1000,
        // `auth` 表示應該使用 HTTP 基礎驗證，並提供憑據
        // 這將設置一個 `Authorization` 頭，覆寫掉現有的任意使用 `headers` 設置的自定義 `Authorization`頭
        auth: {
          username: 'test',
          password: '1111'
        },
      })

5、總結

一般我們在項目中使用，都會提前封裝好axios請求的一些常用方法和屬性，api接口也會統一管理，在下一篇中再詳細記錄——關於axios請求和api接口的統一管理