首先你要先安装axios 和 qs的依赖
npm install axios
npm install qs
//安装了淘宝镜像的可以使用cnpm
cnpm install axios
cnpm install qs
直接贴代码
import axios from 'axios';//引入axios
import qs from "qs";//引入序列化对象的库
import router from '@/router';//引入路由 用于拦截状态码为未登录状态进行跳转登录页
import store from '@/store';//引入vuex 拿token
// 区分线上环境 : 开发环境
//axios.defaults.baseURL = process.env.NODE_ENV === 'production' ? '线上环境的接口前缀地址' : '测试环境的接口前缀地址';
axios.defaults.baseURL = process.env.NODE_ENV === 'production' ? 'http://www.linfengya.cn' : '192.168.3.44:9000';
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';
//请求超时时间 (10s)
axios.defaults.timeout = 10000;
// 声明一个axios拦截器 请求前拦截 一般用于携带token
axios.interceptors.request.use(config => {
config.headers['authorizationToken'] = store.state.token || localStorage.getItem("token");
return config;
}, err => {
// Do something with request error
return Promise.reject(err);
});
// 声明一个axios拦截器 请求后拦截 服务器返回结果时候判断再返回
axios.interceptors.response.use(res => {
console.log(res);
if (res.status === 200) {
return res.data
} else if (res.status == 406) {
// 406 是未登录状态码 (具体问你们后端) 说明用户没登录 直接跳转登录页
router.replace({
path: '/login',
// 携带当前路由 用于登录后再次进入到该页面
query: { redirect: router.currentRoute.fullPath }
})
} else {
console.log(res);
return res
}
}, err => {
console.error(err)
});
const request = {
post(url, data = {}) {
// 判断用户传递的URL是否/开头,如果不是,加上/
url = url.indexOf('/') == 0 ? url : '/' + url
// 直接将data序列化
return axios.post(url, qs.stringify(data))
},
get(url, data = {}) {
url = url.indexOf('/') == 0 ? url : '/' + url
return axios.get(url + '?' + qs.stringify(data))
}
};
export default request
main.js中将其引入并挂载全局
import $request from "@/config/request.js";// 导入我们刚才写的js
Vue.prototype.$request = $request;//挂载axios到vue原型上
使用
// this.$request.post("/app/recruit/getCourseList", {
// token:'qec145',
// userId: 999
// }).then(res => {
// console.log(res);
// }).catch(err => {
// console.log(err);
// });
每天进步一点点
后面接触到了vue3 + ts 补充一个ts中封装axios
我的文件目录
|src
|----config
|----|----request
|----|----|----index.ts
|----|----index.ts
config 下的index.ts: 即 配置接口域名
/*
* 接口域名管理 base.ts
*
* */
export const baseUrl = "http://192.168.0.58:88"; //线下
export const baseUrl2 = "http://192.168.0.58:88"; //线上
config 下的request 下的index.ts :
import store from "@/store";
import axios from "axios";
import qs from "qs";
import { baseUrl } from "@/config";
axios.defaults.headers = {
"X-Requested-With": "XMLHttpRequest",
"Content-Type": "application/json;charset=utf-8"
};
axios.defaults.baseURL =
process.env.NODE_ENV === "production" ? baseUrl : baseUrl;
// 请求超时
axios.defaults.timeout = 10000;
// 开始请求
axios.interceptors.request.use(
(config: any) => {
// #region
/**
* @description 在发送请求之前做些什么 这里可以添加token
* @description description
*/
// #endregion
store.state.token ? (config.headers["token"] = store.state.token) : null;
console.log(store.state);
return config;
},
(error: any) => {
return Promise.reject(error);
}
);
// 请求数据返回前做操作
axios.interceptors.response.use(
(config: any) => {
if (config.status === 200) {
return config.data;
} else {
return config;
}
},
(error: any) => Promise.reject(error)
);
export const $post = (url: any, params: Object = {}) => {
url = url.indexOf("/") === 0 ? url : "/" + url;
return axios.post(url, JSON.stringify(params));
};
export const $get = (url: any, params: Object = {}) => {
url = url.indexOf("/") === 0 ? url : "/" + url;
return axios.get(url + JSON.stringify(params));
};
export const $upLoadImg = (url: any, params: Object = {}) => {
url = url.indexOf("/") === 0 ? url : "/" + url;
const config = {
headers: { "Content-Type": "multipart/form-data" }
};
return axios.post(url, params, config);
};
页面中使用
import { $post,$get, $upLoadImg } from "@/config/request";
const List = (params: Object = {}) => {
$post("/shop/list", params).then((res:any)=>{
console.log(res)
})
};
评论