基本使用
安装
// 项目中安装
npm install axios --S
// cdn 引入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
导入
import axios from 'axios'
发送请求
axios({
url:'xxx', // 设置请求的地址
method:"GET", // 设置请求方法
params:{ // get请求使用params进行参数凭借,如果是post请求用data
type: '',
page: 1
}
}).then(res => {
// res为后端返回的数据
console.log(res);
})
并发请求axios.all([])
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (res1, res2) {
// res1第一个请求的返回的内容,res2第二个请求返回的内容
// 两个请求都执行完成才会执行
}));
在项目中使用以及位置
在项目中封装
axios文件
import axios from 'axios';
import config from './config';
import Cookies from "js-cookie";
import router from '@/router'
// 使用vuex做全局loading时使用
// import store from '@/store'
export default function $axios(options) {
return new Promise((resolve, reject) => {
const instance = axios.create({
baseURL: config.baseUrl,
headers: config.headers,
timeout: config.timeout,
withCredentials: config.withCredentials
})
// request 拦截器
instance.interceptors.request.use(
config => {
let token = Cookies.get('token')
// 1. 请求开始的时候可以结合 vuex 开启全屏 loading 动画
// console.log(store.state.loading)
// console.log('准备发送请求...')
// 2. 带上token
if (token) {
config.headers.token = token
} else {
// 重定向到登录页面
router.push('/login')
}
// 3. 根据请求方法,序列化传来的参数,根据后端需求是否序列化
if (config.method === 'post') {
// if (config.data.__proto__ === FormData.prototype
// || config.url.endsWith('path')
// || config.url.endsWith('mark')
// || config.url.endsWith('patchs')
// ) {
// } else {
// config.data = qs.stringify(config.data)
// }
}
return config
},
error => {
// 请求错误时
console.log('request:', error)
// 1. 判断请求超时
if (error.code === 'ECONNABORTED' && error.message.indexOf('timeout') !== -1) {
console.log('timeout请求超时')
// return service.request(originalRequest);// 再重复请求一次
}
// 2. 需要重定向到错误页面
const errorInfo = error.response
console.log(errorInfo)
if (errorInfo) {
error = errorInfo.data // 页面那边catch的时候就能拿到详细的错误信息,看最下边的Promise.reject
const errorStatus = errorInfo.status; // 404 403 500 ...
router.push({
path: `/error/${errorStatus}`
})
}
return Promise.reject(error) // 在调用的那边可以拿到(catch)你想返回的错误信息
}
)
// response 拦截器
instance.interceptors.response.use(
response => {
let data;
// IE9时response.data是undefined,因此需要使用response.request.responseText(Stringify后的字符串)
if (response.data == undefined) {
data = JSON.parse(response.request.responseText)
} else {
data = response.data
}
if(data.code == 401){ //登录失效
Cookies.remove('token')
router.push({
path: `/login`
})
}
// 根据返回的code值来做不同的处理
switch (data.rc) {
case 1:
console.log(data.desc)
break;
case 0:
store.commit('changeState')
// console.log('登录成功')
default:
}
// 若不是正确的返回code,且已经登录,就抛出错误
// const err = new Error(data.desc)
// err.data = data
// err.response = response
// throw err
return data
},
err => {
if (err && err.response) {
switch (err.response.status) {
case 400:
err.message = '请求错误'
break
case 401:
err.message = '未授权,请登录'
break
case 403:
err.message = '拒绝访问'
break
case 404:
err.message = `请求地址出错: ${err.response.config.url}`
break
case 408:
err.message = '请求超时'
break
case 500:
err.message = '服务器内部错误'
break
case 501:
err.message = '服务未实现'
break
case 502:
err.message = '网关错误'
break
case 503:
err.message = '服务不可用'
break
case 504:
err.message = '网关超时'
break
case 505:
err.message = 'HTTP版本不受支持'
break
default:
}
}
console.error(err)
return Promise.reject(err) // 返回接口返回的错误信息
}
)
// 请求处理
instance(options).then(res => {
resolve(res)
return false
}).catch(error => {
reject(error)
})
})
}
config.js文件
//global.js 后台地址
import { baseUrl } from '@/utils/global'
export default {
method: 'get',
// 基础url前缀
baseUrl: baseUrl,
// 请求头信息
headers: {
'Content-Type': 'application/json;charset=UTF-8'
},
// 参数
data: {},
// 设置超时时间
timeout: 100000,
// 携带凭证
withCredentials: true,
// 返回数据类型
responseType: 'json'
}
api.js文件
/*
* 接口统一集成模块
*/
import * as Intro from "./moudules/Intro";
import * as login from "./moudules/login";
import * as user from "./moudules/user";
import * as dept from "./moudules/dept";
import * as role from "./moudules/role";
import * as menu from "./moudules/menu";
import * as dict from "./moudules/dict";
import * as log from "./moudules/log";
import * as NumberManagement from "./moudules/NumberManagement";
import * as ax from "./moudules/ax";
import * as axg from "./moudules/axg";
// 默认全部导出
export default {
Intro,
login,
user,
dept,
role,
menu,
dict,
log,
NumberManagement,
ax,
axg,
};
index.js文件
导入所有接口并且挂载到原型上
// 导入所有接口
import api from './api'
const install = Vue => {
if (install.installed)
return;
install.installed = true;
Object.defineProperties(Vue.prototype, {
// 注意,此处挂载在 Vue 原型的 $api 对象上
$api: {
get() {
return api
}
}
})
}
export default install
在moudules里面创建一个axg.js文件
//axg 文件内容如下
import axios from '../axios'
/*
* 产品管理/AXG模式
*/
// 分页查询
export const findPage = (data) => {
return axios({
url: '/base/productAxg/findPage',
method: 'post',
data
})
}
// 新增保存
export const save = (data) => {
return axios({
url: '/base/productAxg/save',
method: 'post',
data
})
}
// 删除
export const deleteProductAxg = (data) => {
return axios({
url: '/base/productAxg/deleteProductAxg',
method: 'post',
data
})
}
在产品管理/AXG模式页面中使用
data() {
return {
pageRequest: {
pageNum: 1,
pageSize: 10,
param: {},
},
params: {
productShortName: null,
}
}
}
methods: {
// 获取分页数据
findPage() {
this.pageRequest.param = this.params;
this.$refs.kttable.loading = true;
//调用api里面的axg模块的findPage()方法并传参去掉接口
this.$api.axg.findPage(this.pageRequest).then((res) => {
this.pageResult = res.data;
this.$refs.kttable.loading = false;
})
},
}
// 生命周期 - 创建完成(可以访问当前this实例)
created() {
this.findPage()
},
以上只是我自己在项目中用到的如果没有满足可以参考其他文献
参考一
补充思路:
// 位置 utils/request.js
import axios from "axios";
import router from "../router";
import {Message} from "element-ui";
import {getToken, removeToken, setToken} from "@/utils/auth";
import {getRefreshToken} from "@/api/user";
import md5 from "js-md5";
let whiteStatus = false;
router.beforeEach(async (to, form, next) => {
whiteStatus = to.path === "/privacy";
next();
});
const _Message = Message;
const errCode = [1000, 1002, 1005]; // 1000 token违法 1001 token刷新 1002 token刷新失败 1003 修改当前账号退出 1005长时间不操作
// create an axios instance
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 1000 * 30, // request timeout
// withCredentials: true,
// transformRequest: [(data) => {
// const obj = {}
// for (const key in data) {
// if (data[key] !== null) {
// obj[key] = data[key]
// }
// }
// // Do whatever you want here, for example headers.Authorization = `Bearer ${jwt}`
// return obj
// }, ...axios.defaults.transformRequest]
});
service.updateToken = (token) => {
service.defaults.headers["token"] = token;
setToken(token);
};
// request interceptor
service.interceptors.request.use(
(config) => {
config.headers["token"] = getToken();
const params = {};
if (config.params) {
for (const key in config.params) {
if (config.params[key] !== null && config.params[key] !== "") {
params[key] = config.params[key] + "";
}
}
}
config.params = {
timestamp: +new Date() + "",
nonce: Math.random()
.toString(36)
.substr(2),
...params,
};
if (config.params.dataType == "form") {
config.headers["Content-Type"] =
"application/x-www-form-urlencoded;charset=UTF-8";
}
if (config.params.encryptType) {
// 是否需要加密 0 不加密, 1加密
const data = {};
if (config.data) {
for (const key in config.data) {
if (config.data[key] !== null && config.data[key] !== "") {
data[key] = config.data[key];
}
}
}
const arr = {
...data,
...config.params,
secret: "h#2TEkRTd^82+u?ch*s1qy51j%fiow8!",
uri: config.url,
};
const sign = {};
// 字符串排序
Object.keys(arr)
.sort()
.forEach(function (key) {
sign[key] = arr[key];
});
const m = md5(JSON.stringify(sign));
config.params.sign = m.toUpperCase();
}
return config;
},
(error) => {
return Promise.reject(error);
}
);
// 是否正在刷新的标记
let isRefreshing = false;
// const isAlert = null
// const key = 'updatable'
// 重试队列,每一项将是一个待执行的函数形式
let retryRequests = [];
// response interceptor
service.interceptors.response.use(
(response) => {
const res = response.data;
if (res.code === 200 ) {
return res.data;
}
if(res && res.size>0){
return res
}
if (errCode.includes(res.code)) {
removeToken();
whiteStatus || router.push("/login");
return;
}
// if (res.code === 1003) { // 同一账号多次登录
// if (!isAlert) {
// isAlert = MessageBox.alert(res.msg, '提示', {
// confirmButtonText: '确认',
// showClose: false,
// callback: action => {
// if (action === 'confirm') {
// removeToken()
// router.push('/login')
// isAlert = null
// return
// }
// }
// })
// }
// }
// if(res.code ===400){
// router.push('/login')
// }
if (res.code === 1001) {
// 刷新Token
const config = response.config;
if (!isRefreshing) {
isRefreshing = true;
return getRefreshToken()
.then((resp) => {
const token = resp;
service.updateToken(token);
retryRequests.forEach((cb) => cb(token));
retryRequests = [];
return service(config);
})
.catch(() => {
removeToken();
router.push("/login");
return;
})
.finally(() => {
isRefreshing = false;
});
} else {
return new Promise((resolve) => {
retryRequests.push((token) => {
config.headers["token"] = token;
resolve(service(config));
});
});
}
}
// message.error({ content: res.msg, key, duration: 2 })
_Message({
showClose: true,
message: res.msg,
type: "error",
});
return Promise.reject(res.msg);
},
(error) => {
_Message({
message: JSON.stringify(error).includes("timeout")
? "请求超时"
: "请求失败",
type: "error",
});
return Promise.reject(error);
}
);
export default service;
单独设置api
导入使用: