axios封装及运用async..await进行异步请求

526 阅读1分钟
//requst请求封装
import axios from 'axios'
const instance = axios.create({
  baseURL:
    'https://www.fastmock.site/mock/ded6d8389a1bd48ae543792802f07ce9/jd-vue',
  timeout: 10000
})
const post = (url, data = {}) => {
  return new Promise((resolve, reject) => {
    instance
      .post(url, data, {
        header: {
          'Content-type': 'application/json'
        }
      })
      .then((response) => {
        resolve(response)
      })
      .catch((error) => {
        reject(error)
      })
  })
}
const get = (url, params = {}) => {
  return new Promise((resolve, reject) => {
    instance.get(url, { params }).then(
      (response) => {
        resolve(response)
      },
      (error) => {
        reject(error)
      }
    )
  })
}
export { post, get }


//调用post请求
const handleLogin = async () => {
    // 调用接口
    try {
      if (data.phone === '') {
        showToast('手机号不能为空!')
        return
      }
      if (data.password === '') {
        showToast('密码不能为空!')
        return
      }
      const result = await post('/api/user/login', {
        phone: data.phone,
        password: data.password
      })
      if (result.data.code === '0000') {
        localStorage.setItem('isLogin', 'true')
        router.push({ name: 'Home' })
      } else {
        showToast('登录失败或密码不正确!!!')
      }
    } catch (error) {
      showToast('发送请求失败')
    }
  }