import{_ as s,c as n,o as a,a as l}from"./app.2b769fcb.js";const i=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":3,"title":"","slug":"\u2705-axios-\u5C01\u88C5\u53CA\u63A5\u53E3\u7BA1\u7406"}],"relativePath":"guide/vue2/axios.md","lastUpdated":1661153879000}'),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(() => {})