Axios的正確食用方法
這裡分享出我個人封裝的一個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 = {}, opts={}) {
opts.method = 'get' //修改全局提交類型
return this.request(url, data, opts) // 調用方法，開始訪問
}
//定義類庫中的post事件
post(url, data = {}, opts={}) {
opts.method = 'post'//修改全局提交類型
return this.request(url, data, opts)// 調用方法，開始訪問
}
//總訪問方法
request(url, data = {}, 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 || '//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('//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)
}
}
效果圖：
如果對您有所幫助，歡迎您點個關注，我會定時更新技術文檔，大家一起討論學習，一起進步。
