vue中发送axios请求

首先建立一个点击事件

<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

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

 

vue中发送axios请求

上一篇:【IDEA】java.lang.NoClassDefFoundError: com/fasterxml/jackson/databind/ObjectMapper的解决方法 转


下一篇:django边学边做:用Django3创建一个图片网站,实现多张图片上传、显示并删除图片(一、创建项目、app和模型类)