接下来,带来js全新技术ES6,结合Vue install全局组件实现Axios封装,以代码形式讲解。
1、请求封装
//
file:src/api/http/http.js
import axios from ‘axios‘
axios.create();
axios.interceptors.request.use((config)=>{ //axios请求拦截return config; //记得return请求})
axios.interceptors.response.use((response)=>{
return response;
})
class http{
static async get(url,params,contentType="application/x-www-form-urlencoded"){
return await axios.get(url,{
params,
headers:{
"Content-Type":contentType
}
})
}
static async post(url,params,contentType="application/x-www-form-urlencoded"){
return await axios.post(url,params,{
headers:{
"Content-Type":contentType
}
})
}
}
export default http
2、引入封装的http.js
//file: src/api/http/login.js import http from ‘./http‘ export const login=(params)=>http.get("api/course",params)
3、将所有封装的请求封装进一个js文件
//
file : src/api/http/index.js
import {login} from ‘./login‘
export default {
login
}
4、实现vue全局注册组件
//
file : src/api/index.js
import api from ‘./http‘
const install=(vue)=>{
if(install.installed){
return;
}
vue.prototype.$api=api;
}
export default install
5、main.js使用(作者配置webpack别名,可以直接引入)
//
file : main.js
import api from ‘api/index‘
Vue.use(api);
接下来,就可以在页面中使用this.$api.login等进行请求了哦,ES6最大的特点是方便、简介,笔者建议大家温故知新,循序渐进!
原文:https://www.cnblogs.com/uimeigui/p/11831720.html
【说明】:本文章由站长整理发布,文章内容不代表本站观点,如文中有侵权行为,请与本站客服联系(QQ:254677821)!