這里分享出我個人封裝的一個axios，我會盡量每行注釋，希望對大家有所幫助，
1. 安裝
全域執行代碼
npm install axios;
2. 撰寫全域axios檔案（附件里有代碼）
在src目錄中創建一個axios目錄，里面創建一個index.js檔案
寫上全域index.js代碼
import axios from 'axios'//引入axios
const methodType = 'get' | 'post' | 'delete' | 'put'//設定全域提交型別
const DataParamsMethod = ['post', 'delete', 'put']//設定資料提交的型別
export class Http { //定義全域http事件
header
httpOpts
constructor() {
this.header = {} //設定訪問的header頭部
this.httpOpts = { //設定默認的訪問引數
method: 'get', //訪問型別
noHandleError: false, //訪問失敗
noHandle401: false, //訪問401
noHandle403: false, //訪問403
noHandle500: false //訪問500
}
}
//定義類別庫中的get事件
get(url, data = https://www.cnblogs.com/smileZAZ/archive/2021/12/18/{}, opts={}) {
opts.method ='get' //修改全域提交型別
return this.request(url, data, opts) // 呼叫方法，開始訪問
}
//定義類別庫中的post事件
post(url, data = https://www.cnblogs.com/smileZAZ/archive/2021/12/18/{}, opts={}) {
opts.method ='post'//修改全域提交型別
return this.request(url, data, opts)// 呼叫方法，開始訪問
}
//總訪問方法
request(url, data = https://www.cnblogs.com/smileZAZ/archive/2021/12/18/{}, opts={}) {
opts = { ...this.httpOpts, ...opts } // 匯入全域型別等資料
const contentType ='application/json' //定義回傳頭頭部
return new Promise((resolve, reject) => { //定義promise事件，開始訪問
const method = opts.method || 'get' //定義訪問型別
void axios({
url, //訪問地址
baseURL: process.env.baseURL || process.env.apiUrl || 'https://static.popodv.com', //設定訪問前綴，可以設定總訪問的前綴
data: data ? data : {},//post設定資料
params: opts.method === 'get' ? data : {},//get設定資料
timeout: 60 * 1000, // 請求超時
headers: {
...this.header, //設定headers頭部
'content-type': contentType//設定回傳頭頭部
},
method //設定訪問型別
})
.then((res) => { //當有回呼時
if (res.status === 200) {
return resolve(res.data) //回傳資料
} else if (res.status === 500) { //訪問報錯，引數問題
return resolve(res.data) //回傳資料，方便代碼操作
}
})
.catch(err => {//總訪問報錯
return reject(err)//呼叫錯誤回呼
})
})
}
}
3. 撰寫api檔案
在src目錄中創建一個api目錄，里面創建一個index.js檔案
寫上各個介面的訪問代碼
// 引入axios封裝檔案
import { Http } from '@/axios/index.js'
//定義全域axios事件
const axios = new Http()
// get方法案例
export function getTest () {
return axios.get('/data/attr/gfs.json')
}
// post方法案例
export function postTest (name) {
return axios.post('https://static.popodv.com/data/attr/gfs.json',{
name:name
})
}
4. 頁面參考
頁面上引入
import {getTest} from '@/api/index.js'
呼叫代碼
async mounted() {
const res = await getTest();
if(res.status == 200){
console.log(res.data)
}
}
效果圖：
如果對您有所幫助，歡迎您點個關注，我會定時更新技術檔案，大家一起討論學習，一起進步，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/385285.html
標籤：其他
上一篇：gradients(漸變)
下一篇：box-shadow(盒子陰影)