如何在Vue項目中使用axios請求
在實際的項目中，和後臺的數據交互是少不瞭的，我通常使用的是 axios 庫，所以以下示例也是以 axios 為基礎來進行封裝的。
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 散佈在各個文件中，如果需要在接口調用成功或失敗時做一些處理，就需要更改每個文件。所以把這些接口請求統一集中起來，如果有調整，直接在集中文件中找到修改就好瞭，而不用再去查每個文件。
3、創建文件
首先在項目的 src 目錄中，新建文件夾及文件目錄結構如下：
├── src 源碼目錄
│ ├── apis 接口文件目錄
│ │ ├── login.api.js 登錄模塊的接口 api
│ │ └── user.api.js 用戶模塊的接口 api
│ ├── services 請求相關文件目錄
│ │ ├── address.js 請求地址配置文件
│ │ └── request.js axios封裝，請求攔截、響應碼處理等操作
api接口文件模塊的劃分，大可以根據自己的實際項目，按業務功能或業務邏輯或其他形式劃分。
4、請求地址配置
一般我們的項目環境都會有多個，少的也會有開發環境和生產環境。正常情況下，在開發環境下和生產模式下有著不同的 baseURL，所以，我們需要根據不同的環境切換不同的 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 () {
// 創建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() // 請求頭統一添加token
}
config.headers = Object.assign(config.headers, requestHeader)
return config
},
error => {
Promise.reject(error)
}
)
}
// 根據請求方式，判斷參數是放在query中還是body中。
// 最直觀的區別，比如GET請求把參數包含在url中，而POST則通過request body把參數放置在body體中，所以在提交時的參數形式是有區別的
// 以下列瞭四種我一般常用請求方式的參數形式，大傢可以自行調整
/**
* 發送get請求
* @param {String} url地址
* @param {Object} query 查詢參數
* @return json數據
*/
get (url, query = {}) {
return this._request('get')(url, {
...query
})
}
/**
* 發送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
}
/**
* 發送請求
* @param {String} method 請求方法類型
* @param headers
* @returns {function(*=, *=):Promise<unknown>}
* @private
*/
_request (method, headers) {
this.setHeaders(this.handleHeaders()) // 設置統一的請求頭
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) => {
// 發送真正的請求，驗證權限，檢查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)
})
})
}
}
}
// 請求成功，返回錯誤碼
// 具體狀態碼跟後臺開發人員統一，然後根據狀態碼進行相應提示
// 下面是我在項目中的操作，大傢可自行調整擴展
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的資料請關註WalkonNet其它相關文章！
推薦閱讀：
- vue封裝axios的幾種方法
- axios的interceptors多次執行問題解決
- vue3+vite+axios 配置連接後端調用接口的實現方法
- Vue如何防止按鈕重復點擊方案詳解
- 關於React Native使用axios進行網絡請求的方法