617字 3.1分钟
Code适合初学者配置使用，只封装了 get 和 post 其他类似patch、put和axios.all()的方法得自己动手了，如果遇到项目有多个baseURL的这套封装就显得很不灵活，但一般是不会遇到的，这套简单的封装总的来说够用了，且非常实用。
新建https.ts复制下面代码进去引用即可，如果是 js 版本的把 url, param后面的去掉。
import axios from "axios";
import qs from "qs";
axios.defaults.timeout = 5000; //响应时间
axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded;charset=UTF-8"; //配置请求头
axios.defaults.baseURL = "http://192.168.0.6:9000"; //配置接口地址
//POST传参序列化(添加请求拦截器)
axios.interceptors.request.use(
config => {
//在发送请求之前做某件事
if (config.method === "post") {
config.data = qs.stringify(config.data);
}
return config;
},
error => {
console.log("错误的传参");
return Promise.reject(error);
}
);
//返回状态判断(添加响应拦截器)
axios.interceptors.response.use(
res => {
//对响应数据做些事
if (!res.data.success) {
return Promise.resolve(res);
}
return res;
},
err => {
if (err.response.status == 504 || err.response.status == 404) {
console.log("服务器被吃了⊙﹏⊙∥");
} else if (err.response.status == 403) {
console.log("权限不足,请联系管理员!");
} else {
console.log("未知错误");
}
return Promise.reject(err);
}
);
//返回一个Promise(发送post请求)
export function myPost(url: any, params: any) {
return new Promise((resolve, reject) => {
axios
.post(url, params)
.then(
response => {
resolve(response);
},
err => {
reject(err);
}
)
.catch(error => {
reject(error);
});
});
}
////返回一个Promise(发送get请求)
export function myGet(url: any, param: any) {
return new Promise((resolve, reject) => {
axios
.get(url, {
params: param
})
.then(
response => {
resolve(response);
},
err => {
reject(err);
}
)
.catch(error => {
reject(error);
});
});
}
export default {
myPost,
myGet
};#axios 使用方法
<template>
<div class="home"></div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import https from "../https"; //1.引入
@Component({
data() {
return {
dataList: []
};
},
created() {
console.log(https);
let param = {
pageNo: 1,
pageSize: 20
};
//2.使用
https
.myGet("/case/lists", param)
.then(res => {
console.log(res.data.dataList);
this.dataList = res.data.dataList;
})
.catch(err => console.log(err));
}
})
export default class Home extends Vue {}
</script>#axios 拦截器指定页面添加 token
// 拦截request,/ 添加请求拦截器
axios.interceptors.request.use(
function (config) {
// 在发送请求之前做些什么
if (config.url !== "login") {
config.headers["Authorization"] = localStorage.getItem("token");
}
return config;
},
function (error) {
// 对请求错误做些什么
return Promise.reject(error);
}
);接口请求错误处理(status !== 200),应用场景：全局拦截报错信息跳转指定页面（login、home）
//返回状态判断(添加响应拦截器)
axios.interceptors.response.use(
res => {
//对响应数据做些事
if (!res.data.success) {
return Promise.resolve(res);
}
return res;
},
error => {
console.log("网络异常");
console.log(error.response.status);
//直接打印error打印不出来!!!!
// console.log(error.response.data);
// console.log(error.response.headers);
return Promise.reject(error);
}
);