Vue + Axios 请求接口方法与传参方式详解

下面是详细讲解 "Vue + Axios 请求接口方法与传参方式详解" 的完整攻略。

简介

Vue 是一个渐进式框架，许多 web 应用程序使用它来构建 UI。Axios 是一个基于 promise 的 HTTP 库，可以用于进行数据请求。在 Vue 中，我们可以结合 Axios 在应用程序中轻松地发送数据请求。

本攻略将为您提供如何使用 Vue + Axios 请求数据及处理传参的流程。

安装

安装 Vue：

npm install vue --save 

安装 Axios：

npm install axios --save

配置 Axios 请求

在 Vue 中配置 Axios：

import axios from 'axios'  

const instance = axios.create({  
  baseURL: 'http://localhost:3000/api',   
  timeout: 1000  
}); 

export default {
  name: 'Axios',
  data() {
    return {}
  },
  methods: {
    apiGet(url, data) {
      return instance.get(url, {
        params: data
      })
    },
    apiPost(url, data) {
      return instance.post(url, data)
    },
    apiPut(url, data) {
      return instance.put(url, data)
    },
    apiDelete(url, data) {
      return instance.delete(url, data)
    }
  }
}

请求数据

GET 请求

在 Vuex 中获取数据：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    userList: []
  },
  mutations: {
    addUsers(state, payload) {
      state.userList = payload;
    }
  },
  actions: {
    getUsers({commit}) {
      return new Promise((resolve, reject) => {
        this.$api.apiGet('/users').then(res => {
            commit("addUsers", res.data);
            resolve(res);
        }).catch(err => {
            reject(err);
        });
      })
    }
  },
  getters: {
    userList: state => state.userList
  }
})

POST 请求

在组件中提交数据：

export default {
  name: "CreateUser",
  data() {
    return {
      username: "",
      email: "",
      password: "",
      confirm_password: "",
    };
  },
  methods: {
    createUser() {
      const data = {
        username: this.username,
        email: this.email,
        password: this.password,
        confirm_password: this.confirm_password,
      };
      this.$api
        .apiPost(`/user`, data)
        .then((res) => {
          if (res.status === 201) {
            // Redirect to user list page.
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};

传参

在 URL 传递参数

GET 请求可以将查询参数直接通过 URL 传递到后台，类似于 /users?id=1 的形式。这种方式非常方便，但是对于保护敏感数据，不太适合。

通过 params 参数传递参数

我们也可以通过 params 参数来传递参数，如：

axios.get('/user', {
  params: {
    id: 1,
    name: 'Tom'
  }
})

通过 data 参数传递参数

当使用 POST、PUT 和 DELETE 等方法时，我们使用 data 参数传递参数，如：

axios.post('/user', {
  id: 1,
  name: 'Tom'
})

示例

以下是一个示例，展示如何使用 Axios 和 Vue 发送数据请求：

<template>
  <div>
    <ul>
      <li v-for="user in userList" :key="user.id">{{ user.name }}</li>
    </ul>
    <div>
      <input type="text" v-model="name" />
      <button @click="createUser">Create User</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserList',
  data() {
    return {
      name: '',
    }
  },
  mounted() {
    this.getUsers()
  },
  methods: {
    getUsers() {
      this.$store.dispatch('getUsers')
    },
    createUser() {
      const data = {
        name: this.name,
      }
      this.$api
        .apiPost('/user', data)
        .then((res) => {
          if (res.status === 201) {
            this.getUsers()
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
  },
  computed: {
    userList() {
      return this.$store.getters.userList
    },
  },
}
</script>

以上就是 "Vue + Axios 请求接口方法与传参方式详解" 的完整攻略，希望能帮助到您。