封装axios请求
src\utils\request.js
import {
getCookie } from './cookie.js';
import Vue from 'vue'
import axios from 'axios';
//2。创建server
const instance = axios.create({
baseURL: '',// index/index http://kumanxuan1.f3322.net:8001
timeout: 5000 //超时链接
})
//3.请求拦截 登陆放token的地方
instance.interceptors.request.use(config => {
config.headers['My_ToKen'] = getCookie('token')
return config
})
//4.响应拦截 解码加密 公共逻辑判断 项目中所有的错误 都可以在这个位置进行处理
instance.interceptors.response.use(res => {
// console.log(res)
//全局错误提示
if (res.status === 200 || res.data.code == 200) {
return res.data
} else {
Vue.prototype.$message({
message: '网络不通',
type: 'error'
});
}
})
export default instance
封装cookie 对应的操作方法
src\utils\cookie.js
import Cookie from 'js-cookie'
export function setCookie(key, value) {
Cookie.set(key, value)
}
export function getCookie(key) {
return Cookie.get(key)
}
export function removeCookie(key) {
Cookie.remove(key)
}
接口示例
src\http\http.js
// 存放所有的接口请求
import instance from "../utils/request";
// 登录接口 post
export function loginApi(params) {
return instance({
url: '/login',
method: 'post',
data: params //axios是就是promise封装的ajax 工具类
})
}
//获取首页列表数据 get
export function getDataList(params) {
return instance({
url: '/getDataList',
method: 'get',
data: params
})
}
调用接口，发送请求示例
import {
getDataList } from "@/http/http";
getDataList({
page: this.page, pageSize: this.pageSize }).then((res) => {
this.tableData = res.data
})
