vue项目中axios请求网络接口封装的示例代码
每个项目网络请求接口封装都是很重要的一块，第一次做Vue项目，我们的封装方法如下：
(1).新建一个js文件，取名api.js
(2).引入axios，mint-UI,如下图：
importaxiosfrom'axios'
import{MessageBox,Toast}from'mint-ui'
axios.defaults.timeout=50000//默认请求超时时间
axios.defaults.headers='请求头'
(2).封装get方法
exportfunctiongetHttp(url,params={}){
//创建动画mint-ui
Indicator.open({
text:'加载中...',
spinnerType:'fading-circle'
})
returnnewPromise((resolve,reject)=>{
axios.get(url,{
params:params
})
.then(response=>{
resolve(response.data)
Indicator.close()////关闭动画
})
.catch(err=>{
reject(err)
Indicator.close()////关闭动画
MessageBox.alert('message',err)
})
})
}
(4).封装post方法
exportfunctionpostHttp(url,data={}){
Indicator.open({
text:'加载中...',
spinnerType:'fading-circle'
})
returnnewPromise((resolve,reject)=>{
axios.post(url,data)
.then(response=>{
if(response.data.status==1){
resolve(response.data)
}else{
Toast(response.data.msg)
}
Indicator.close()////关闭动画
},(err)=>{
reject(err)
Indicator.close()
})
})
}
(5).封装后方法的使用
在main.js中引入全局变量
import{getHttp,postHttp}from'./config/api'
Vue.prototype.$getHttp=getHttp
Vue.prototype.$postHttp=postHttp
//get网络请求
this.$getHttp(this.$shopUrl+'api/product/list',)
.then((response)=>{
response.result//请求返回数据
})
//post网络请求
this.$postHttp(this.$shopUrl+'api/product/list',)
.then((response)=>{
response.result//请求返回数据
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。