import{_ as s,o as n,c as a,d as l}from"./app.0ed445b7.js";const i=JSON.parse('{"title":"Axios \u5C01\u88C5\u53CA\u63A5\u53E3\u7BA1\u7406","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/axios.md","lastUpdated":1672820852000}'),p={name:"guide/vue2/axios.md"},o=l(`
utils/request.js
\u5C01\u88C5 axios ,\u5F00\u53D1\u8005\u9700\u8981\u6839\u636E\u540E\u53F0\u63A5\u53E3\u505A\u4FEE\u6539\u3002
service.interceptors.request.use
\u91CC\u53EF\u4EE5\u8BBE\u7F6E\u8BF7\u6C42\u5934\uFF0C\u6BD4\u5982\u8BBE\u7F6E token
config.hideloading
\u662F\u5728 api \u6587\u4EF6\u5939\u4E0B\u7684\u63A5\u53E3\u53C2\u6570\u91CC\u8BBE\u7F6E\uFF0C\u4E0B\u6587\u4F1A\u8BB2service.interceptors.response.use
\u91CC\u53EF\u4EE5\u5BF9\u63A5\u53E3\u8FD4\u56DE\u6570\u636E\u5904\u7406\uFF0C\u6BD4\u5982 401 \u5220\u9664\u672C\u5730\u4FE1\u606F\uFF0C\u91CD\u65B0\u767B\u5F55import axios from "axios";
import store from "@/store";
import { Toast } from "vant";
// \u6839\u636E\u73AF\u5883\u4E0D\u540C\u5F15\u5165\u4E0D\u540Capi\u5730\u5740
import { baseApi } from "@/config";
// create an axios instance
const service = axios.create({
baseURL: baseApi, // url = base api url + request url
withCredentials: true, // send cookies when cross-domain requests
timeout: 5000, // request timeout
});
// request \u62E6\u622A\u5668 request interceptor
service.interceptors.request.use(
(config) => {
// \u4E0D\u4F20\u9012\u9ED8\u8BA4\u5F00\u542Floading
if (!config.hideloading) {
// loading
Toast.loading({
forbidClick: true,
});
}
if (store.getters.token) {
config.headers["X-Token"] = "";
}
return config;
},
(error) => {
// do something with request error
console.log(error); // for debug
return Promise.reject(error);
}
);
// respone\u62E6\u622A\u5668
service.interceptors.response.use(
(response) => {
Toast.clear();
const res = response.data;
if (res.status && res.status !== 200) {
// \u767B\u5F55\u8D85\u65F6,\u91CD\u65B0\u767B\u5F55
if (res.status === 401) {
store.dispatch("FedLogOut").then(() => {
location.reload();
});
}
return Promise.reject(res || "error");
} else {
return Promise.resolve(res);
}
},
(error) => {
Toast.clear();
console.log("err" + error); // for debug
return Promise.reject(error);
}
);
export default service;
\u5728src/api
\u6587\u4EF6\u5939\u4E0B\u7EDF\u4E00\u7BA1\u7406\u63A5\u53E3
home.js
\u91CC\u662F\u9996\u9875\u7684\u63A5\u53E3\u8FD9\u91CC\u8BB2\u89E3 user.js
url
\u63A5\u53E3\u5730\u5740\uFF0C\u8BF7\u6C42\u7684\u65F6\u5019\u4F1A\u62FC\u63A5\u4E0A config
\u4E0B\u7684 baseApi
method
\u8BF7\u6C42\u65B9\u6CD5data
\u8BF7\u6C42\u53C2\u6570 qs.stringify(params)
\u662F\u5BF9\u6570\u636E\u7CFB\u5217\u5316\u64CD\u4F5Chideloading
\u9ED8\u8BA4 false
,\u8BBE\u7F6E\u4E3A true
\u540E\uFF0C\u4E0D\u663E\u793A loading ui \u4EA4\u4E92\u4E2D\u6709\u4E9B\u63A5\u53E3\u4E0D\u9700\u8981\u8BA9\u7528\u6237\u611F\u77E5import qs from "qs";
// axios
import request from "@/utils/request";
//user api
// \u7528\u6237\u4FE1\u606F
export function getUserInfo(params) {
return request({
url: "/user/userinfo",
method: "post",
data: qs.stringify(params),
hideloading: true, // \u9690\u85CF loading \u7EC4\u4EF6
});
}
// \u8BF7\u6C42\u63A5\u53E3
import { getUserInfo } from "@/api/user.js";
const params = { user: "sunnie" };
getUserInfo(params)
.then(() => {})
.catch(() => {});