异步请求那点事儿

fetch

get 请求

默认请求方式，不能传参

fetch('https://api.ip.sb/geoip')
  .then(res => res.json())
  .then(data=>console.log(data))
  .catch(err => console.warn(err))

post 请求

参数为字符串类型

fetch('http://api.komavideo.com/news/list', {
  method: 'POST',
  body: JSON.stringify({
    pageSize: 10,
    pageIndex: 1,
    copyright: 'osc'
  })
})
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.warn(err))

axios

get请求

this.$axios.get('/api/system/indexinfo',{
  params: {  
    id: 12345，
    name: user
  }
})
.then(res => {
  console.log(res)
})
.catch(error => {
  console.log(error)
})

post请求

this.$axios.post('/api/members/register', {
  phone: '18770043048',
  password: '123456a',
  inviterCode: '123456'
})
.then(res => console.log(res))
.catch(error => console.log(error))

拦截器

request拦截

axios.interceptors.request.use(
 config => {
  config.baseURL = '/api/'
  config.withCredentials = true // 允许携带token ,这个是解决跨域产生的相关问题
  config.timeout = 6000
  let token = sessionStorage.getItem('access_token')
  let csrf = store.getters.csrf
  if (token) {
   config.headers = {
    'access-token': token,
    'Content-Type': 'application/x-www-form-urlencoded'
   }
  }
  if (config.url === 'refresh') {
   config.headers = {
    'refresh-token': sessionStorage.getItem('refresh_token'),
    'Content-Type': 'application/x-www-form-urlencoded'
   }
  }
  return config
 },
 error => {
  return Promise.reject(error)
 }
)

response 拦截

axios.interceptors.response.use(
 response => {
  // 定时刷新access-token
  if (!response.data.value && response.data.data.message === 'token invalid') {
   // 刷新token
   store.dispatch('refresh').then(response => {
    sessionStorage.setItem('access_token', response.data)
   }).catch(error => {
    throw new Error('token刷新' + error)
   })
  }
  return response
 },
 error => {
  return Promise.reject(error)
 }
)