创建一个名为api的文件夹,在api里面创建一个叫index.js的文档
在index.js文档中先引入axios,如果没有下载那就先下载
cnpm install --save axios
cnpm install --save vue-axios
安装后
import axios from "axios";
在index下引入这个
axios.defaults.timeout = 30000;
这个设置多长时间,然后过期
axios.defaults.baseURL = "http://47.94.4.201";
这个是二次封装的这个要是不会就先不管
// 添加响应拦截器
axios.interceptors.response.use(
function (response) {
//可以写if判断,提前拦截错误信息return response;
},
function (err) {
return Promise.reject(err);}
);
这个是在数据发送回来时可以做的判断,可以写状态是否为200等等这些
export function apiGet(url, params) {
return new Promise((resolve, reject) => {
axios.get(url, {
params: params,headers: { token: sessionStorage.getItem("token") },
})
.then((res) => {
resolve(res.data);})
.catch((err) => {
reject(err.data);});
});
}
这个是简单的get封装
export function apiPost(url, params) {
return new Promise((resolve, reject) => {
axios({
method: "post",url: url,
data: params,
})
.then((res) => {
resolve(res.data);})
.catch((err) => {
reject(err.data);});
});
}
这个是简单的post封装
然后在mian.js上把这个引入进去可以全局使用了
import { apiGet, apiPost } from "./api/api.js";
Vue.prototype.$apiGet = apiGet;
Vue.prototype.$apiPost = apiPost;
在上面不是写了一个二次封装的吗,我把二次封装的补充一下,
在api下的文件当中在创建一个api.js文档,在文档中写以下内容
先引入你需要的方法名
import { apiGet } from "./index";
然后使用这个方法
export function getList() {
return new Promise((resolve) => {
apiGet("/index.php/index/index/getcode").then((res) => {
resolve(res);
});
});
}
在页面上使用看一下代码
import { getList } from '@/api';
export default {
data() {
return {
}
},
created() {
getList().then(res => {
console.log(res);
})
}
}
好了这个就是一个简单的二次封装