下载axios
cnpm install --save axios
cnpm install --save vue-axios
引入axios
import axios from "axios";
import { apiGet, apiPost } from "../src/api/index";
Vue.prototype.$apiGet = apiGet;
Vue.prototype.$apiPost = apiPost;
Vue.prototype.$axios = axios;
创建个api文件夹 创建一个js文件
第一次封装
import axios from "axios";
axios.defaults.timeout = 30000;
// axios.defaults.baseURL = "http://47.94.4.201";
//获取当前环境配置项中的地址,会自动追加到接口上
console.log(process.env.NODE_ENV);
//获取配置项信息,可以做你的逻辑处理
if (process.env.NODE_ENV === "development") {
//开发环境下的执行操作
axios.defaults.baseURL = "http://47.94.4.201/";
console.log("开发");
} else if (process.env.NODE_ENV === "test") {
axios.defaults.baseURL = "http://49.94.4.21/";
//测试环境下的执行操作
console.log("测试");
} else if (process.env.NODE_ENV === "production") {
axios.defaults.baseURL = "https://www.zzgoodqc.cn/";
//生产环境下的执行操作
console.log("正式");
} else {
console.log(process.env.NODE_ENV);
console.log("出现问题");
}
// 添加响应拦截器
axios.interceptors.response.use(
function (response) {
//可以写if判断,提前拦截错误信息
return response;
},
function (err) {
return Promise.reject(err);
}
);
//代码中无需再加服务器IP地址,会自动追加过去
export function apiGet(url, params) {
return new Promise((resolve, reject) => {
axios
.get(url, {
params: params,
herader: { token: sessionStorage.getItem("token") },
})
.then((res) => {
resolve(res.data);
})
.catch((err) => {
reject(err.data);
});
});
}
export function apiPost(url, data) {
return new Promise((resolve, reject) => {
axios({
method: "post",
url: url,
data,
headers: { strheader: "123" },
})
.then((res) => {
resolve(res.data);
})
.catch((err) => {
reject(err.data);
});
});
}
再创建一个js文件,进行二次封装
import { apiGet } from "./index";
export function getList() {
return new Promise((resolve) => {
apiGet("https://www.zzgoodqc.cn/index.php/index/Moves/getMovesList")
.then((res) => {
resolve(res);
})
.catch((error) => {
resolve(error);
});
});
}
export function loginList(data) {
return new Promise((resolve) => {
apiGet("https://www.zzgoodqc.cn/index.php/index/Moves/getDetalById", data)
.then((res) => {
resolve(res);
})
.catch((error) => {
resolve(error);
});
});
}
在正文主体中使用
import { getList, loginList } from "../api/api";