如何在Vue項目中使用axios請求

更新時間：2021年05月12日 09:14:10 作者：sugar_coffee

這篇文章主要介紹了如何在Vue項目中使用axios請求，對Vue感興趣的同學，可以參考下

1、安裝

首先是 npm 安裝 axios 很簡單：npm install axios

2、沒有封裝存在的問題

如果在沒有封裝接口的項目中，在文件中隨處可以看到如下的接口調用方法：

this.$axios.post("/user/add", {
    params: {
        name: this.name,
        age: this.age
    }
})
.then(res => {
    console.log(res)
})
.then(err => {
    console.log(res)
})

這樣寫不是不可以，但是存在一些缺陷，接口請求的 url 散布在各個文件中，如果需要在接口調用成功或失敗時做一些處理，就需要更改每個文件。所以把這些接口請求統(tǒng)一集中起來，如果有調整，直接在集中文件中找到修改就好了，而不用再去查每個文件。

3、創(chuàng)建文件

首先在項目的 src 目錄中，新建文件夾及文件目錄結構如下：

├── src 源碼目錄

│ ├── apis 接口文件目錄

│ │ ├── login.api.js 登錄模塊的接口 api

│ │ └── user.api.js 用戶模塊的接口 api

│ ├── services 請求相關文件目錄

│ │ ├── address.js 請求地址配置文件

│ │ └── request.js axios封裝，請求攔截、響應碼處理等操作

api接口文件模塊的劃分，大可以根據自己的實際項目，按業(yè)務功能或業(yè)務邏輯或其他形式劃分。

4、請求地址配置

一般我們的項目環(huán)境都會有多個，少的也會有開發(fā)環(huán)境和生產環(huán)境。正常情況下，在開發(fā)環(huán)境下和生產模式下有著不同的 baseURL，所以，我們需要根據不同的環(huán)境切換不同的 baseURL。

address.js 文件：

// 根據 process.env.NODE_ENV 切換不同的 baseURL
const isPro = process.env.NODE_ENV === 'production'

module.exports = {
    // 'apis'：vue.config.js中proxy設置的代理
    baseURL: isPro ? 'http://192.168.100.120/ceds' : '/apis'
}

5、axios 配置，設置請求頭及響應碼處理

大體思路是通過封裝一個request類，其中包含了get、post等請求方法，這些請求方法又都會去調用 request 方法，該方法通過傳入的不同參數調用原始的 axios 請求，然后返回一個 Promise。

request.js 文件：

import axios from 'axios'
import Qs from 'qs'
import Vue from 'vue'
import { getToken } from '@Utils/session.utils' // 存儲獲取token文件
import address from './address' // 請求地址

class Request {
    constructor () {
        // 創(chuàng)建axios實例
        this._axios = axios.create({
            baseURL: address.baseURL,
            timeout: 1000 * 5, // 請求超時時間
            headers: {}
        })
        // 請求攔截
        this._axios.interceptors.request.use(
            config => {
                const requestHeader = {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Content-Type': 'application/json; charset=UTF-8',
                    'Access-Control-Allow-Origin': '*',
                    token: getToken() // 請求頭統(tǒng)一添加token
                }
                config.headers = Object.assign(config.headers, requestHeader)
                return config
            },
            error => {
                Promise.reject(error)
            }
        )
    }
     
    // 根據請求方式，判斷參數是放在query中還是body中。
    // 最直觀的區(qū)別，比如GET請求把參數包含在url中，而POST則通過request body把參數放置在body體中，所以在提交時的參數形式是有區(qū)別的
    // 以下列了四種我一般常用請求方式的參數形式，大家可以自行調整
    /**
      * 發(fā)送get請求
      * @param {String} url地址
      * @param {Object} query 查詢參數
      * @return json數據
      */
    get (url, query = {}) {
        return this._request('get')(url, {
            ...query
        })
    }
    /**
      * 發(fā)送post請求
      * @param {String} url地址
      * @param {Object} body 查詢參數
      * @return json數據
      */
    post(url, body = {}, headers) {
        let data;
        if(this.isFormData(body)) {
            data = body
        } else if(Array.isArray(body)) {
            data = body
        } else {
            data = { ...body }
        }
        return this._request('post')(url, headers)(url, data);
    }
    put (url, body = {}) {
        return this._request('put')(url, {
            ...body
        });
    }
    delete(url, body = {}) {
        return this._request('delete')(url, {
            ...body
        });
    }

    isFormData = v => {
        return Object.prototype.toString.call(v) === '[object FormData]'
    }


    /**
      * 設置請求頭
      * @param {Object} header 請求頭
      */
    setHeaders (header) {
        Object.keys(header).forEach(key => {
            this._axios.defaults.headers[key] = header[key]
        })
    }

    // 處理請求頭 headers
    handleHeaders () {
        const headers = {}
        headers['XMIME-TYPE'] = '3'
        Headers['Content-Type'] = 'application/json; charset=UTF-8'
        return headers
    }

    /**
      * 發(fā)送請求
      * @param {String} method 請求方法類型
      * @param headers
      * @returns {function(*=, *=):Promise<unknown>}
      * @private
      */
    _request (method, headers) {
        this.setHeaders(this.handleHeaders()) // 設置統(tǒng)一的請求頭
        if (headers) {
            this.setHeaders(headers) // 自定義請求頭
        }
         
        return (url, data, timeout) => {
            const config = {
                url,
                method,
                timeout: timeout || this._axios.defaults.timeout
            } // 構造請求 config

            // 判斷請求類型 get post
            const paramType = ['get', 'delete'].indexOf(method) !== -1 ? 'params' : 'data'
            config[paramType] = data
            //參數序列化
            config.paramsSerializer = params => {
                return Qs.stringify(params, { arrayFormat: 'repeat' });
            }
             
            return new Promise((resolve, reject) => {
                // 發(fā)送真正的請求，驗證權限，檢查404等status
                this._axios
                    .request(config)
                    .then(response => {
                        if (this.handleSuccessStatus(response.data.code, response.data)) {
                            if (response.headers['content-type'] !== 'text/plain; charset=urf-8') {
                      　　　　　　resolve(
                                    // 對響應結果二次包裝
                                    Object.assign(
                                    　　{
                                        　　 success: Number(response.data.code) === 200,
                                            data: response.data.data,
                                            msg: response.data.msg
                                        },
                                      　response.data
                                    )
                                ) // 處理返回結果
                            } else {
                                resolve(response.data)
                            }
                        }
                    }, response => {
                        // 處理錯誤碼
                    　　if(response.response) {
                            const statusCode = response.response.status
                            this.handleErrorStatus(statusCode)
                        } else {
                        　　 Vue.prototype.$message.error(response.message)
                        }
                        reject(response)
                    })
                    .catch(err => {
                        reject(err)
                    })
                })
            }
        }
    }

    // 請求成功，返回錯誤碼
    // 具體狀態(tài)碼跟后臺開發(fā)人員統(tǒng)一，然后根據狀態(tài)碼進行相應提示
    // 下面是我在項目中的操作，大家可自行調整擴展
    handleSuccessStatus (code, data) {
        let result = ''
        let flag = false
        switch (code) {
            case '20007':
                result = '未查找到二次認證密碼！'
                flag = true
                break
            case '20008':
                result = '您的二次認證密碼還未修改，請先修改！'
                flag = true
                break
            case '20009':
                result = '您還未開啟二次認證，請聯系管理員！'
                flag = true
                break
            case '90001':
                result = '請輸入二次認證密碼！'
                flag = true
                break
            case '90002':
                result = '無操作權限！'
                flag = true
                break
            default:
                break
        }

        // 進行通知
        // $message方法是我按需引入的element-ui中的提示組件，你可以替換成自己的提示組件
        if (result) {
            Vue.prototype.$message.error(result)
        }
        return flag
    }
    // 根據錯誤碼獲取錯誤提示
    handleErrorStatus (statusCode) {
        let errorMsg = ''
        if (statusCode === 500) {
            errorMsg = '數據請求失敗，請聯系管理員！'
        } else if (statusCode === 404) {
            errorMsg = '請求地址錯誤！'
        } else if (statusCode === 402) {
            errorMsg = '當前您沒有權限操作該數據！'
        } else {
            errorMsg = '請求出錯！'
        }
        // 進行通知
        Vue.prototype.$message.error(errorMsg)
    }
}

export default new Request()

6、使用

我們在接口管理文件中，通過調用上面封裝的 request 類，傳入對應的參數即可。

user.api.js 文件：

import http from '../services/request'

/**
 * @description 獲取用戶列表
 * @param {*} params 請求接口的參數
 */
// 此處定義的reqUserList方法會調用我們封裝的request中的get方法，get方法的第一個參數是請求地址，第二參數是query參數
export const reqUserList = params => http.get('/user/list', params)

在調用的 .vue 文件中，引入該方法并傳入參數即可

import { reqUserList } from '@Apis/user.api' // 導入api

export default {
    name: 'UserList',
    ... ...
    created() {
     
    },
    methods: {
        async getUsers() {
            // 調用api接口，并傳入參數
            const res = await reqUserList({
                page: 1,
                size: 10
            })
            console.log(res) // 獲取的響應結果
        }
    }
}

如此，就完成了對接口的封裝及基本使用。

PS：以上這些文件名、文件夾名、方法名、路徑等都是我自己取得，你可以按照自己的代碼風格習慣進行調整。

以上就是如何在Vue項目中使用axios請求的詳細內容，更多關于Vue項目中使用axios的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: