vue的axios和mock.js你了解嗎
更新時間：2022年02月10日 16:02:02 作者：jayLog
這篇文章主要為大家詳細(xì)介紹了vue的axios和mock.js，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
axios.js
axios是vue中用于發(fā)送ajax(http)請求的工具類
安裝：
npm install axios
全局引入 axios
// main.js import http from 'axios'; Vue.prototype.$http = http;
通過axios發(fā)送一個http請求
<script>
// ...
mounted(){
// 發(fā)送請求
this.$http.get('./user/ID=123').then(function(success){
//成功請求區(qū)間
console.dir(success)
}).catch(function(error){
//失敗返回區(qū)間
console.dir(error)
})
}
// ...
</script>
封裝一個簡單的axios包，為axios添加攔截器和判斷允許環(huán)境(用于判斷請求地址)axios.js
注意這部分的攔截器與mockjs是兩回事?。?！
// api/axios.js
import axios from 'axios'
import config from '../config'
const baseUrl = process.env.NODE_ENV == 'development' ? config.baseUrl.dev : config.baseUrl.pro
class HttpRequest {
constructor(baseUrl){
this.baseUrl = baseUrl
}
getInsideConfig(){
const config = {
baseUrl:this.baseUrl,
header:{}
}
return config
}
// 攔截器這部分，官網(wǎng)copy過來的，注意這部分的攔截器與mock攔截器是兩回事?。。?
interceptors(instance){
// 添加請求攔截器
instance.interceptors.request.use(function (config) {
// 在發(fā)送請求之前做些什么
// console.dir(config)
return config;
}, function (error) {
// 對請求錯誤做些什么
return Promise.reject(error);
});
// 添加響應(yīng)攔截器
instance.interceptors.response.use(function (response) {
// 對響應(yīng)數(shù)據(jù)做點什么
return response;
}, function (error) {
// 對響應(yīng)錯誤做點什么
console.dir(error,'error')
return Promise.reject(error);
});
}
// 請求方法
request(options){
const instance = axios.create()
options = {...this.getInsideConfig, ...options}
this.interceptors(instance)
return instance(options)
}
}
export default new HttpRequest(baseUrl)
使用。添加data.js
// data.js
import axios from './axios'
export const getMenu = (param)=>{
return axios.request({
url:'/permission/getMenu',
method:'post',
data:param
})
}
export const test = (param)=>{
return axios.request({
// 修改域名
baseUrl:'https://me.kervi.cn',
url:'/',
method:'get',
data:param
})
}
mockjs
mockjs可以用于攔截ajax請求，在mock的回調(diào)函數(shù)中可以給請求添加模擬數(shù)據(jù)，用于模擬后臺接口
安裝
npm i mockjs
編寫mockjs攔截文件mock.js
import Mock from 'mockjs'
import homeApi from './mockservice/home'
// Mock.mock('攔截地址',設(shè)置返回數(shù)據(jù)的回調(diào)函數(shù)),攔截 home/getData
Mock.mock('/home/getData', homeApi.getStaticData)
mockservice/home.js
// 簡單模擬一下方法，如果需要文件，請幫我點個贊，私聊
export default {
getStatisticalData: () => {
return {code:200,data:{list:[1,2,3,4,5]}
}
}
引入mock.js
// main.js 中引入 import '../api/mock.js'
發(fā)送ajax請求，測試攔截
總結(jié)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
這篇文章主要介紹了vue-router實現(xiàn)原理及兩種模式分析,給大家介紹了vue-router hash模式與history模式不同模式下處理邏輯，需要的朋友可以參考下2020-02-02
Vue.js是前端三大框架之一,以其輕巧、高性能的特性脫穎而出,Vue.js專注于構(gòu)建數(shù)據(jù)驅(qū)動的Web界面,采用漸進式設(shè)計,易于上手,支持組件化開發(fā),核心功能包括響應(yīng)式數(shù)據(jù)綁定和視圖組件的組合,Vue還提供了生命周期、事件綁定等多種功能,支持ES6語法2024-09-09
這篇文章主要為大家詳細(xì)介紹了Vue移動端實現(xiàn)圖片上傳及超過1M壓縮上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
端午將至，大家都開始吃粽子了么？本文將用vite2與vue3開發(fā)出一個招財貓小游戲，在圖案不停滾動的同時選出可以轉(zhuǎn)出不同的素材最終得到粽子獎勵，康康你能用多少次才會轉(zhuǎn)出自己喜愛口味的粽子吧2022-05-05
vue.js 實現(xiàn)點擊按鈕動態(tài)添加li的方法
今天小編就為大家分享一篇vue.js 實現(xiàn)點擊按鈕動態(tài)添加li的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue-element-admin 菜單標(biāo)簽失效的解決方式
今天小編就為大家分享一篇vue-element-admin 菜單標(biāo)簽失效的解決方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue 設(shè)置 input 為不可以編輯的實現(xiàn)方法
今天小編就為大家分享一篇vue 設(shè)置 input 為不可以編輯的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
vue el-tree 默認(rèn)展開第一個節(jié)點的實現(xiàn)代碼
這篇文章主要介紹了vue el-tree 默認(rèn)展開第一個節(jié)點的實現(xiàn)代碼,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-05-05
elementUI中el-table表頭和內(nèi)容全部一行顯示完整的方法
最近參與web開發(fā)時,讓我解決一個elementui控制內(nèi)容單行顯示,下面這篇文章主要給大家介紹了關(guān)于elementUI中el-table表頭和內(nèi)容全部一行顯示完整的方法,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了 詳解在vue使用weixin-js-sdk常見使用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05