1、安装
npm install axios
npm i qs
下方是我微信公众号的二维码,可以扫码关注以下,后期博文推送主要在公众号上面,有什么问题也可以通过公众号跟我发消息哦~
2、在 utils 文件夹下新建 axios.js
第一种: 在 axios.js 里面配置本地、开发、生产环境 的 地址(baseURL )
import axios from "axios"; // 引入 axios 模块,用于请求数据
import Qs from "qs"; // 在对axios进行封装前,引入 qs 包,用于序列化表单,不然后台接收不了数据(post请求默认Content-type是 application/json,而后台需要接收的数据格式为application/x-www-form-urlencoded)
import storage from "@/utils/cookie";
// axios.defaults.withCredentials = true // 跨域时如果要带上cookie话则需要设置withCrendentials
// axios.defaults.crossDomain = true; //false 不跨域 true 跨域
export default function(path, params, method = "GET", headerType = "json") {
let baseURL = "",
headers = {},
data = {};
if (process.env.NODE_ENV == "development") {
baseURL = "/apis";
} else if (process.env.NODE_ENV == "production") {
baseURL = "http://airjob.333job.com:86/"; //正式
} else if (process.env.NODE_ENV == "testing") {
baseURL = "http://192.168.101.106:8200/"; //测试
}
axios.defaults.headers["X-Requested-With"] = "XMLHttpRequest";
axios.defaults.headers["Cache-Control"] = "no-cache";
axios.defaults.timeout = 10000; //设置默认的请求超时时间。例如超过了10s,就会告知用户当前请求超时,请刷新等。
//post请求
if (method === "post") {
if (headerType === "json") {
//参数是json类型
axios.defaults.headers["Content-Type"] = "application/json;charset=UTF-8";
data = params;
}
// else if(headerType == "form-data"){
// axios.defaults.headers["Content-Type"] = 'multipart/form-data;charset=UTF-8'
// data = params;
// }
// else if (headerType == "stream") {
// axios.defaults.headers["Content-Type"] = "application/octet-stream";
// data = params;
// }
else {
axios.defaults.headers["Content-Type"] =
"application/x-www-form-urlencoded;charset=UTF-8";
data = Qs.stringify(params);
}
}
//get请求
if (method === "get") {
if (headerType == !"json") {
axios.defaults.headers["Content-Type"] =
"application/x-www-form-urlencoded;charset=UTF-8";
}
data = Qs.stringify(params);
path = path + "?" + data;
data = {};
}
if (method === "put") {
if (headerType == "json") {
axios.defaults.headers["Content-Type"] = "application/json;charset=UTF-8";
data = params;
} else {
axios.defaults.headers["Content-Type"] =
"application/x-www-form-urlencoded;charset=UTF-8";
data = Qs.stringify(params);
}
}
// 添加请求拦截器
axios.interceptors.request.use(
config => {
// 在发送请求之前做些什么
// 每次发送请求之前判断是否存在token,如果存在,则统一在http请求的header都加上token,不用每次请求都手动添加了
// 即使本地存在token,也有可能token是过期的,所以在响应拦截器中要对返回状态进行判断
let token = storage.getCookie("token");
if (token) {
config.headers["Token"] = token;
}
return config;
},
error => {
return Promise.reject(error);
}
);
// 添加响应拦截器
// 方法一: 当出现某些情况的时候设置请求拦截
axios.interceptors.response.use(
response => {
if (response.data.code == 401) {
this.$storage.removeStorage("token"); // 清除token
router.replace({
path: "/",
query: {
redirect: router.currentRoute.fullPath
}
});
}
return response;
},
error => {
return Promise.reject(error);
}
);
// 方法二: 添加响应拦截器
// axios.interceptors.response.use(
// response => {
// return response;
// },
// error => {
// if (error.response.status) {
// switch (error.response.status) {
// // 对响应数据做点什么
// // 这里可以跟后台开发人员协商好统一的错误状态码
// // 根据返回的状态码进行一些操作,例如登录过期提示,错误提示等等
// // 下面列举几个常见的操作,其他需求可自行扩展
// // 401: 未登录, 则跳转登录页面,并携带当前页面的路径
// // 在登录成功后返回当前页面,这一步需要在登录页操作。
// case 401:
// router.replace({
// path: "/login",
// query: { redirect: router.currentRoute.fullPath }
// });
// break;
// // 403 token过期, 登录过期对用户进行提示, 清除本地token, 跳转登录页面
// case 403:
// this.$message.error("登录过期,请重新登录"); //这里使用element的消息提示
// this.$storage.removeStorage("token"); // 清除token
// // 跳转登录页面,并将要浏览的页面fullPath传过去,登录成功后跳转需要访问的页面
// setTimeout(() => {
// router.replace({
// path: "/login",
// query: {
// redirect: router.currentRoute.fullPath
// }
// });
// }, 1000);
// break;
// // 404请求不存在
// case 404:
// this.$message.error("网络请求不存在");
// break;
// // 其他错误,直接抛出错误提示
// default:
// this.$message.error(error.response.data.message);
// }
// }
// return Promise.reject(error.response);
// }
// );
//发送请求
return new Promise((resolve, reject) => {
axios({
baseURL,
method,
url: path,
data,
headers,
timeout: 10000
})
.then(res => {
resolve(res.data);
})
.catch(err => {
reject(err);
});
});
}
第二种: 不在 在 axios.js 里直接配置本地、开发、生产环境 的 地址(baseURL ),而是通过
baseURL = process.env.BASE_URL 来设置,但需在对应的 dev.env.js / prod.env.js / test.env.js 去配置 BASE_URL
(1)
import axios from 'axios';
import Qs from 'qs'
import storage from './cookie'
export default function (path, params, method = "GET", headerType = "json") {
let baseURL = process.env.BASE_URL, headers = {}, data = {} // 此处设置 baseURL = process.env.BASE_URL,故需在对应的 dev.env.js prod.env.js test.env.js 去配置 BASE_URL
axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'
axios.defaults.headers['Cache-Control'] = 'no-cache'
//post请求
if (method === 'post') {
if (headerType === "json") {
axios.defaults.headers["Content-Type"] = 'application/json;charset=UTF-8'
data = params
}
else if (headerType == "form-data") {
axios.defaults.headers["Content-Type"] = 'multipart/form-data;charset=UTF-8'
data = params;
}
else {
axios.defaults.headers["Content-Type"] = 'application/x-www-form-urlencoded;charset=UTF-8'
data = Qs.stringify(params);
}
}
//get请求
if (method === 'get') {
if (headerType == !'json') {
axios.defaults.headers["Content-Type"] = 'application/x-www-form-urlencoded;charset=UTF-8'
}
data = Qs.stringify(params);
path = path + '?' + data
data = {};
}
// 请求拦截
axios.interceptors.request.use(config => {
let token = storage.getCookie('token');
if (token) {
config.headers['Token'] = token;
}
return config;
}, error => {
return Promise.reject(error)
})
//开始请求
return new Promise((resolve, reject) => {
axios({
baseURL,
method,
url: path,
data,
headers,
timeout: 5000,
}).then(res => {
resolve(res.data)
}).catch(err => {
reject(err)
})
})
}
(2)在 config — > dev.env.js 里
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
BASE_URL: '"/apis"'
})
(2)在 config — > prod.env.js 里
'use strict'
module.exports = {
NODE_ENV: '"production"'
}
(3)在 config — > test.env.js 里
'use strict'
const merge = require('webpack-merge')
const devEnv = require('./dev.env')
module.exports = merge(devEnv, {
NODE_ENV: '"testing"',
BASE_URL: '"http://xxx/xxx/xxx"', // 测试环境地址
})
3、使用:在 apis文件夹下的 apis.js 中引入我们封装的 axios
import https from "@/utils/axios";
//登录
export const Login = function (params) {
let url = "/net/webLogin";
return https(url, params, "post");
};