vue - axios简单封装
2024-09-08 19:20:10
分析：
（1）axios处理接口请求。可能需处理请求拦截，响应拦截，不同类型的请求，所以需要一个http.js文件
（2）请求都是基于相关环境的，所以需要一个url.js处理环境
（3）可根据不同模块将同一个模块的请求放在一起，所以可将test模块的请求放在test.js中
（4）新建一个文件，将不同模块的请求都集合在一起，所以需要一个api.js
（5）使用
目录：
main.js 将所有api挂载在vue原型上
import api from './api/api.js' Vue.prototype.$api = api;
url.js
/*
* @Author: lingxie
* @Date: 2020-06-29 11:37:09
* @Descripttion:
*/
let baseUrl;
if(process.env.NODE_ENV == 'development'){
baseUrl = '/api' //此处使用了代理，请看vue.config.js
}else if(process.en .NODE_ENV == 'test'){
baseUrl = 'https://www.test.com'
}else if(process.en .NODE_ENV == 'production'){
baseUrl = 'https://www.prod.com'
}
export default baseUrl
http.js
/*
* @Author: lingxie
* @Date: 2020-06-29 09:36:50
* @Descripttion:
*/
import axios from 'axios';
import qs from 'qs';
import baseurl from './url';
console.log(baseurl);
// 创建axios实例
// const instance = axios.create({
// baseURL:this.$utils.baseURL,
// timeout:2000
// });
const instance = axios.create();
instance.defaults.baseURL = baseurl;
instance.defaults.timeout = 2000;
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
// config.headers['token'] = '1111111111111111'
if(config.method === 'post'){
// config.data = qs.stringify(config.data);
// config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
// config.headers['token'] = '222222222222'
}
return config; }, function (err) {
// 对请求错误做些什么
return Promise.reject(err);
}); // 添加响应拦截器
instance.interceptors.response.use(function (res) {
// 对响应数据做点什么
return res;
}, function (err) {
// 对响应错误做点什么
return Promise.reject(err);
}); function get(url,params){
return new Promise((resolve,reject)=>{
instance.get(url,{
params:params
}).then(res =>{
resolve(res.data);
}).catch(err=>{
reject(err)
});
});
}; // 适合于Content-Type'为'application/x-www-form-urlencoded post请求
// 客户端把form数据转换成一个字串append到url后面，用?分割。
function post(url,params,){
console.log(qs.stringify(params));// 形如type=top&key=136f240edd201502102577573e95f208
const header ={
headers:{
'Content-Type':'application/x-www-form-urlencoded',
'token':'333333333333333333'
}
}
return new Promise((resolve,reject)=>{
instance.post(url,qs.stringify(params),header).then(res =>{
resolve(res.data);
}).catch(err=>{
reject(err)
});
});
}; // 适合于Content-Type'为'multipart/form-data post请求
function post1(url,params,){
console.log(qs.stringify(params));// 形如type=top&key=136f240edd201502102577573e95f208
const header ={
headers:{
'Content-Type':'multipart/form-data; charset=utf-8;',
'token':'4444444'
}
}
return new Promise((resolve,reject)=>{
instance.post1(url,qs.stringify(params),header).then(res =>{
resolve(res.data);
}).catch(err=>{
reject(err)
});
});
}; export {
get,
post,
post1
};
test.js
/*
* @Author: lingxie
* @Date: 2020-06-29 10:43:02
* @Descripttion:
*/
import {get,post,post1} from './http'; const toutiao =params => post('/toutiao/index',params);//新闻头条
const joke =params =>get('/joke/content/list.php',params);//笑话 const test ={
toutiao,
joke
}
export default test
api.js
import test from './test' //引入test模块的api
const api = {
test
}
export default api;
vue.config.js代理配置
/*
* @Author: lingxie
* @Date: 2020-04-23 13:38:18
* @Descripttion:
*/
module.exports = { devServer: {
proxy: {
// 匹配所有以api开头的请求路径
'/api': {
target: 'http://v.juhe.cn/',
changeOrigin: true, // 把api替换掉
pathRewrite: {
'^/api': ''
}
}
}
}, }
使用：
<!--
* @Author: lingxie
* @Date: 2020-04-23 13:35:57
* @Descripttion:
-->
<template>
<div class="about"> </div>
</template>
<script>
export default { created(){
this.fetch_toutiao();
this.fetch_joke();
},
methods:{
fetch_toutiao(){
let jsonData ={
type:'top',
key:'136f240edd201502102577573e95f208'
}
this.$api.test.toutiao(jsonData).then(res=>{
console.log(res);
});
}, fetch_joke(){
console.log('1111', this.$api);
let jsonData ={
sort:'asc',
time:'1418816972',
key:'14ec2ba9cfdfa38a712ae8c5e80a728c'
}
this.$api.test.joke(jsonData).then(res=>{
console.log(res);
});
} }
}
</script>
最新文章
- 马哥linux运维初级+中级+高级 视频教程 教学视频 全套下载(近50G)
- Html5 设置菱形链接菜单
- Java虚拟机1：什么是Java
- Android中dp和px之间进行转换
- 你需要知道的三个CSS技巧
- swift基础--变量
- 发起SSH攻击主机IP地址列表
- java创建XML及开源DOM4J的使用
- SQL Server 日志文件增长原因定位
- As Easy As A+B
- [ios]iphone 获取UIWebView内Html方法
- CentOS6.5 安装snort
- vim 括号自动补全
- MySQL基础语法命令
- 使用MxNet新接口Gluon提供的预训练模型进行微调
- Office 365 机器人（Bot）开发入门指南 (新篇)
- 当你的layui表格要做全选+删除功能【兼容ie8】
- 你不可错过的Java学习资源清单（包含社区、大牛、专栏、书籍等）
- Linux系统中的文件权限
- java Multimap