vue中发送axios请求

时间：2020-09-28 21:53:00 收藏：0 阅读：69

首先建立一个点击事件

<el-button type="primary" @click="login">登录</el-button>

然后在methods方法中

data () {

return {

// 登录表单的数据绑定对象

loginFrom: {

username: ‘zs‘,

password: ‘123456‘

}

　　}
}，
methods: {
    login () {
      // console.log(this)
      this.$refs.LoginFormRef.validate(async valid => {
        // console.log(valid)
        if (!valid) return {}
        const res = await getLogin(this.loginFrom)
        // console.log(res)
        if (res.meta.status !== 200) return console.log(‘登陆失败‘)
        console.log(‘登陆成功‘)
      })
    }
  }

在api文件中

import request from ‘@utils/request‘

// 获取登陆接口
const getLogin = (params = {}) => request.post(‘/login‘, params)

export {
  getLogin
}

在util文件夹中的request文件中

import axios from ‘axios‘

const request = axios.create({
  baseURL: ‘http://127.0.0.1:8888/api/private/v1/‘,
  timeout: 2000
})

// 请求拦截
request.interceptors.request.use(function (config) {
  return config
}, function (error) {
  return Promise.reject(error)
})

// 响应拦截
request.interceptors.response.use(function (response) {
  // console.log(123)
  return response.data
}, function (error) {
  return Promise.reject(error)
})

export default request

这样一个简单的请求完整过程就好了

原文：https://www.cnblogs.com/jqzc/p/13746799.html