Vue使用axios詳解

一、Vue使用axios封裝

在Vue中使用axios發送請求時，我們可以將其進行封裝，以便於更好地管理代碼和請求。下面是一個簡單的封裝例子：

import axios from 'axios' 

// 配置axios
const service = axios.create({
  baseURL: process.env.BASE_API, // api的base_url
  timeout: 15000, // 請求超時時間
  withCredentials: true // 允許攜帶cookie
})

// 添加請求攔截器
service.interceptors.request.use(
  config => {
    // 在請求發送之前做一些處理
    // 如添加token等
    return config
  },
  error => {
    // 處理請求錯誤
    Promise.reject(error)
  }
)

// 添加響應攔截器
service.interceptors.response.use(
  response => {
    // 在響應數據之前處理
    return response.data
  },
  error => {
    // 處理響應錯誤
    return Promise.reject(error)
  }
)

export default service

通過對axios進行封裝，我們可以配置一些常用的參數，如請求超時時間、攜帶cookie、添加請求頭等。同時，我們也可以添加請求和響應攔截器，在請求、響應前後，做一些常用的處理，如添加token等。

二、Vue使用axios時出現500錯誤

在Vue中使用axios請求數據時，有時會出現500錯誤。這個問題通常是由服務端響應錯誤引起的，可以通過查看控制台中的錯誤信息獲得相應的提示。我們可以通過以下方法來捕捉這個錯誤：

axios.get('/api/test')
    .then(res => {
        // 處理響應數據
    })
    .catch(err => {
        console.error('500錯誤', err)
    })

如果出現500錯誤，控制台將會輸出相關錯誤信息，我們可以根據信息進行定位和解決。

三、Vue使用axios解決跨域

Vue在使用axios時，由於瀏覽器的同源策略，會出現跨域的問題。我們可以通過配置代理來解決這個問題，減少服務端的壓力。下面是配置代理的方法：

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

我們在配置文件中加入了一個代理，將所有以/api開頭的請求轉發到http://localhost:3000伺服器上，然後再通過pathRewrite將請求多餘的/api去掉。

四、Vue使用axios請求數據

在Vue中，通過axios發送請求獲取數據是常見的操作。下面是一個發送GET請求的例子：

axios.get('/api/data')
    .then(res => {
        console.log(res.data)
    })
    .catch(err => {
        console.error(err)
    })

我們可以通過axios的get方法來發送GET請求，並通過then和catch方法處理響應數據和錯誤。在響應數據中，我們可以通過res.data來獲取返回的實際數據。

五、Vue使用axios發送請求

除了GET請求，我們還可以通過axios發送POST、PUT、DELETE等請求。下面是一個發送POST請求的例子：

axios.post('/api/data', {
    name: 'test',
    age: 18
})
.then(res => {
    console.log(res.data)
})
.catch(err => {
    console.error(err)
})

我們可以通過axios的post方法來發送POST請求，並通過then和catch方法處理響應數據和錯誤。在發送請求時，我們也可以通過參數的形式向後端發送數據，如上面例子中的{ name: ‘test’, age: 18 }。

六、Vue使用axios非同步刷新數據

在Vue中，非同步刷新數據是經常使用axios的地方。下面是一個通過axios非同步刷新數據的例子：

data() {
    return {
        dataList: []
    }
},
created() {
    axios.get('/api/data')
        .then(res => {
            this.dataList = res.data
        })
        .catch(err => {
            console.error(err)
        })
}

我們可以在Vue的created鉤子函數中使用axios來非同步刷新數據，並把獲取到的數據賦值給Vue的data中的變數dataList。這樣，我們就可以在頁面中渲染獲取到的數據。

七、Vue使用axios調用後端介面

在Vue中，使用axios調用後端介面是非常常見的，下面是一個簡單的例子：

const api = {
    getData: () => axios.get('/api/data')
}
export default api

我們可以通過封裝api的方式，在Vue中統一管理axios的請求方法。如上面的代碼，我們封裝了一個名為getData的方法，用於獲取/api/data介面的數據，並把它export出去。在Vue中，我們可以直接通過api來調用getData方法：

import api from './api'

created() {
    api.getData()
        .then(res => {
            console.log(res.data)
        })
        .catch(err => {
            console.error(err)
        })
}

通過封裝api，我們可以在Vue中更好地管理各個介面的請求方法和參數，使代碼更加清晰明了。

八、Vue使用Vuex管理axios請求數據

在Vue中，我們可以通過Vuex管理項目中的狀態，包括axios請求的數據等。下面是一個簡單的例子：

// store.js
import axios from 'axios'

const state = {
    dataList: []
}

const mutations = {
    SET_DATA_LIST: (state, dataList) => {
        state.dataList = dataList
    }
}

const actions = {
    getDataList({ commit }) {
        return new Promise((resolve, reject) => {
            axios.get('/api/data')
                .then(res => {
                    commit('SET_DATA_LIST', res.data)
                    resolve()
                })
                .catch(err => {
                    reject(err)
                })
        })
    }
}

export default {
    namespaced: true,
    state,
    mutations,
    actions
}

在上面的代碼中，我們在Vuex中定義了一個名為dataList的狀態，它的初始值為一個空數組。在mutations中，我們定義了修改dataList的方法，在actions中，我們定義了獲取數據的非同步方法，通過axios獲取數據後，調用mutations中的方法更新Vuex中的數據。在我們的組件中，我們可以通過Vuex的mapActions來調用actions中的方法：

import { mapActions } from 'vuex'

export default {
    name: 'DataList',
    computed: {
        ...mapState({
            dataList: state => state.data.dataList
        })
    },
    methods: {
        ...mapActions(['getDataList'])
    },
    created() {
        this.getDataList()
    }
}

通過使用Vuex來管理axios請求數據，可以使我們的代碼更加規範化和清晰，同時也方便對項目中的狀態進行控制和修改。