基于axios在vue中的使用

Axios是一个基于Promise的HTTP客户端，用于浏览器和Node.js中的Ajax请求。它可以在Vue中用于发送HTTP请求以获取数据并在页面中渲染。

Axios的优点：

1. 支持Promise API。

2. 可以拦截请求和响应。

3. 提供了一整套常用的请求方式，如HTTP GET，POST，PUT，DELETE等。

4. 支持浏览器和Node.js环境。

5. 支持请求和响应的拦截和拦截器，可以用于处理错误和统一处理请求。

在Vue中使用Axios的步骤：

步：安装Axios

可以使用 npm 或 yarn 安装Axios

npm install axios --save

yarn add axios --save

第二步：引入Axios

可以在 main.js 中引入 Axios 并挂载到 Vue.prototype 上，这样在.vue 文件中就可以直接使用 this.$axios 发送请求了。

import Vue from 'vue'

import axios from 'axios'

Vue.prototype.$axios = axios

注意：Vue2.x的写法和Vue3.x的写法略有不同，如果你是Vue3.x，请按照下面的写法引入：

import { createApp } from 'vue'

import App from './App.vue'

import axios from 'axios'

const app = createApp(App)

app.config.globalProperties.$axios = axios

app.mount('#app')

第三步：发送请求

在 Vue 组件中发送请求时，可以直接在 methods 中使用 Axios 发送：

import axios from 'axios'

export default {

data() {

return {

users: []

}

},

methods: {

fetchUsers() {

axios.get('https://jsonplaceholder.typicode.com/users')

.then(response => {

this.users = response.data;

})

.catch(error => {

console.log(error);

});

}

},

mounted() {

this.fetchUsers();

}

}

在上面的代码中，我们通过在 mounted 方法中调用 fetchUsers 方法来获取用户列表。fetchUsers 方法中使用 Axios 发送了 GET 请求，并保存了响应数据到 this.users 中。

总结

在 Vue 中使用 Axios 是非常简单易懂的。只需要安装、引入、发送请求三个步骤。Axios 提供了强大的请求和响应拦截器，可以方便地处理错误和统一处理请求。Axios 也支持浏览器和 Node.js 环境，非常方便。