记一次vue+vuex+vue-router+axios+elementUI开发（二）
2024-10-20 21:01:47
开发环境跟脚手架初始完毕后，我们开始配置axios请求后台接口 axios使用说明：https://www.kancloud.cn/yunye/axios/234845
1、本人是在脚手架中的src目录下新建api文件夹，在新建一个fetch.js 文件用来配置axios以及管理后台的接口
2、开始安装axios npm axios --save 安装
3、下面的代码是封住axios后的请求文件
import axios from 'axios'
import qs from 'qs' import { Message } from 'element-ui'; const baseURL = '你的请求地址' // 测试地址 axios.defaults.timeout = 10000; //响应时间
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; // 设置token
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'; //配置请求头
axios.defaults.baseURL = baseURL; //配置接口地址 //POST传参序列化(添加请求拦截器)
axios.interceptors.request.use((config) => {
// 可以在这里设置请求头中的token
// 这里写死一个token，你需要在这里取到你设置好的token的值
// const token = 'this is a token';
// if (token) {
// 这里将token设置到headers中，header的key是Authorization，这个key值根据你的需要进行修改即可
// config.headers.Authorization = token;
// } //在发送请求之前做某件事
if(config.method === 'post'){
// config.data = qs.stringify(config.data);
}
return config;
},(error) =>{
Message({
type: 'error',
message: "错误的传参"
})
return Promise.reject(error);
}); //返回状态判断(添加响应拦截器)
axios.interceptors.response.use((res) =>{
//对响应数据做些事
if(res.data.retcode == 0){
return res
} else if(res.data.retcode == '50021021') {
localStorage.removeItem('user_token_key');
// localStorage.removeItem('userName');
location.href = '#/login';
} else {
Message({
type: 'error',
message: res.data.retmsg
})
// return Promise.reject(res);
return res
}
}, (error) => {
console.log(error)
Message({
type: 'error',
message: "网络异常"
})
return Promise.reject(error);
}) //返回一个Promise(发送post请求)
export function fetchPost(url, params) {
return new Promise((resolve, reject) => {
axios.post(url, params)
.then(response => {
resolve(response.data);
}, err => {
reject(err);
})
.catch((error) => {
reject(error)
})
})
}
// 返回一个Promise(发送get请求)
export function fetchGet(url, param) {
return new Promise((resolve, reject) => {
axios.get(url, {params: param})
.then(response => {
resolve(response.data)
}, err => {
reject(err)
})
.catch((error) => {
reject(error)
})
})
} export default { /**
* 用户登录
*/
Login(params) {
return fetchPost('/useraction/login', params)
}, }
最新文章
- Modified Least Square Method and Ransan Method to Fit Circle from Data
- centos7 zabbix3 install done
- rank 和 星星评级
- Fragment 笔记
- HDU 4121 Xiangqi 模拟题
- $().text() 和 $().html()
- [cocos2d-x]HelloWorldDemo
- Linux下用程序实现统计cpu和内存的利用率
- Linux权限与命令间的关系
- Bridge (br0) Network on Linux
- Java并发编程（十）-- Java中的锁
- python之函数第一篇
- angularjs自定义filter
- 03-Bootstrap学习
- 性能优化系列七：SQL优化
- 开发框架DevExtreme全新发布v18.2.6|附下载
- oracle使用flashback时，没有显示undosql
- Cookie 和 Session 的区别和联系？session的生命周期？多个服务器部署session的管理？
- 【LOJ】#2527. 「HAOI2018」染色
- Redis与Memcached的实现对比