vue(axios)请求接口
【代码】vue(axios)请求接口。
·
安装
可以使用npm或yarn来安装axios:
npm install axios --save
yarn add axios
导包(后端俗语)
import axios from 'axios';
未封装get请求
// 发送 GET 请求
axios.get('/api/user', {
params: {
id: 123
}
}).then(response => {
console.log(response);
}).catch(error => {
console.log(error);
});
未封装post请求
// 发送 POST 请求
axios.post('/api/user', {
name: '张三',
age: 18
}).then(response => {
console.log(response);
}).catch(error => {
console.log(error);
});
封装axios
一般企业都会都多个环境,创建文件夹config/index.js
/**
* 环境配置文件
* 一般在企业级项目里面有三个环境
* 开发环境
* 测试环境
* 线上环境
*/
// 当前的环境
const env = import.meta.env.MODE || 'prod'
const EnvConfig = {
//开发环境
development: {
baseApi: '**/api',
},
// 测试环境
test: {
baseApi: '**/api',
},
//正式环境
pro: {
baseApi: '**/api',
},
}
export default {
env,
...EnvConfig[env]
}
请求封装,创建文件夹api/request.js
import axios from 'axios';
import config from '../config'
import { ElMessage } from 'element-plus'
const NETWORK_ERROR = '网络请求异常,请稍后重试.....'
const request = axios.create({
baseURL: config.baseApi
});
// 请求拦截器
request.interceptors.request.use(config => {
// 在发送请求之前做些什么
return config;
}, error => {
// 对请求错误做些什么
return Promise.reject(error);
});
// 响应拦截器
request.interceptors.response.use((res) => {
const { Data, MsgCode, succeed } = res.data
console.log(res.data);
// 根据后端 协商 视情况而定
if (succeed) {
return Data
} else {
// 网络请求错误
ElMessage.error(MsgCode || NETWORK_ERROR)
return Promise.reject(MsgCode || NETWORK_ERROR)
}
})
export default request;
使用 post请求
//导入 formInLine是一个{} 对象
import request from '@/api/request';
request.post('/User/Login', formInLine
).then(response => {
//这个地方可以配合vuex等多种缓存 然后实现路由跳转等一系列操作
console.log(response)
}).catch(error => {
console.log(error);
});
更多推荐
已为社区贡献1条内容
所有评论(0)