Vue项目中axios的使用（根本篇）

Axios是什么？

Axios是一个基于Promise的HTTP客户端，可以用在浏览器和Node.js中。它有很多长处，比如支持Promise API、拦截哀求和相应、取消哀求、主动转换JSON数据等。在Vue项目中，我们可以使用Axios来发送HTTP哀求，获取数据并展示到页面上。
安装Axios

在Vue项目中使用Axios，我们必要先安装Axios。我们可以通过如下命令来安装Axios：

1. npm install axios --save

复制代码

引入Axios

在安装Axios之后，我们必要在Vue项目中引入Axios。在Vue中，我们可以在main.js文件中引入Axios：

1. import axios from 'axios'
2. Vue.prototype.$axios = axios

复制代码

在上面的代码中，我们通过import语句将Axios引入到我们的Vue项目中。然后，我们将Axios赋值给Vue的原型对象                                   a                         x                         i                         o                         s                         ，这样我们就可以在                         V                         u                         e                         实例中通过                         t                         h                         i                         s                         .                              axios，这样我们就可以在Vue实例中通过this.                  axios，这样我们就可以在Vue实例中通过this.axios来使用Axios了。
发送HTTP哀求

在Vue项目中，我们可以通过Axios来发送HTTP哀求，获取数据并展示到页面上。在Axios中，我们可以通过如下代码来发送一个GET哀求：

1. this.$axios.get('/api/user')
2.   .then(response => {
3.     // 处理成功的响应
4.   })
5.   .catch(error => {
6.     // 处理错误的响应
7.   })

复制代码

在上面的代码中，我们通过axios.get()方法来发送一个GET哀求。axios.get()方法返回一个Promise对象，我们可以通过then()方法和catch()方法来分别处理惩罚成功的相应和错误的相应。
在GET哀求中，我们可以通过向axios.get()方法通报第二个参数来设置哀求参数。在如下例子中，我们向GET哀求中通报了一个参数name，它的值为John：

1. this.$axios.get('/api/user', {
2.   params: {
3.     name: 'John'
4.   }
5. })

复制代码

在POST哀求中，我们可以通过向axios.post()方法通报第二个参数来设置哀求数据。在如下例子中，我们向POST哀求中通报了一个数据对象，它的属性为name和age，它们的值分别为John和25：

1. this.$axios.post('/api/user', {
2.   name: 'John',
3.   age: 25
4. })

复制代码

拦截器

Axios提供了拦截器的功能，我们可以在哀求或相应被处理惩罚之前对它们举行拦截和处理惩罚。在Vue项目中，我们可以使用拦截器来添加公共的哀求头、处理惩罚哀求错误、处理惩罚相应错误等操作。
哀求拦截器

在Axios中，我们可以通过如下代码来添加哀求拦截器：

1. this.$axios.interceptors.request.use(
2.   config => {
3.     // 在请求发送之前做些什么
4.     config.headers.Authorization = getToken()
5.     return config
6.   },
7.   error => {
8.     // 对请求错误
9.     return Promise.reject(error)
10.   }
11. )

复制代码

在上面的代码中，我们通过axios.interceptors.request.use()方法来添加哀求拦截器。该方法接受两个参数：一个是哀求成功时的回调函数，另一个是哀求失败时的回调函数。
在成功的回调函数中，我们可以对哀求举行一些处理惩罚，比如添加公共的哀求头。在如上例子中，我们向哀求中添加了一个Authorization哀求头，它的值为getToken()函数的返回值。
在失败的回调函数中，我们可以处理惩罚哀求错误。在如上例子中，我们通过Promise.reject()方法将错误返回，这样我们就可以在后面的catch()方法中捕获到该错误。
相应拦截器

在Axios中，我们可以通过如下代码来添加相应拦截器：

1. this.$axios.interceptors.response.use(
2.   response => {
3.     // 对响应数据做些什么
4.     return response.data
5.   },
6.   error => {
7.     // 对响应错误做些什么
8.     if (error.response) {
9.       switch (error.response.status) {
10.         case 401:
11.           // 未登录，跳转到登录页
12.           break
13.         case 404:
14.           // 404错误，跳转到404页面
15.           break
16.         case 500:
17.           // 500错误，跳转到500页面
18.           break
19.       }
20.     }
21.     return Promise.reject(error)
22.   }
23. )

复制代码

在上面的代码中，我们通过axios.interceptors.response.use()方法来添加相应拦截器。该方法接受两个参数：一个是相应成功时的回调函数，另一个是相应失败时的回调函数。
在成功的回调函数中，我们可以对相应举行一些处理惩罚，比如获取相应数据。在如上例子中，我们通过return response.data语句将相应数据返回。
在失败的回调函数中，我们可以处理惩罚相应错误。在如上例子中，我们判断了相应错误的状态码，假如是401错误，则跳转到登录页；假如是404错误，则跳转到404页面；假如是500错误，则跳转到500页面。在处理惩罚完错误之后，我们通过Promise.reject()方法将错误返回，这样我们就可以在后面的catch()方法中捕获到该错误。
使用Axios实现API调用

在Vue项目中，我们通常必要调用API来获取数据并展示到页面上。在使用Axios调用API时，我们可以在API文件中定义一个函数，它使用Axios来发送HTTP哀求并返回Promise对象。
在如下例子中，我们定义了一个getUser()函数，它使用Axios来发送GET哀求并返回Promise对象。在函数中，我们通过axios.get()方法来发送GET哀求，并将相应数据返回。

1. import axios from 'axios'
3. export function getUser(id) {
4.   return axios.get(`/api/user/${id}`)
5.     .then(response => {
6.       return response.data
7.     })
8. }

复制代码

在组件中，我们可以通过调用getUser()函数来获取数据并展示到页面上。在如下例子中

1. <template>
2.   <div>
3.     <h1>{{ user.name }}</h1>
4.     <p>{{ user.email }}</p>
5.   </div>
6. </template>
8. <script>
9. import { getUser } from '@/api/user'
11. export default {
12.   data() {
13.     return {
14.       user: {}
15.     }
16.   },
17.   async created() {
18.     const id = this.$route.params.id
19.     try {
20.       this.user = await getUser(id)
21.     } catch (error) {
22.       console.log(error)
23.     }
24.   }
25. }
26. </script>

复制代码

在上面的代码中，我们在组件的created()生命周期函数中调用了getUser()函数来获取用户数据，并将用户数据生存到组件的user数据中。在调用getUser()函数时，我们使用了async/await语法来处理惩罚异步哀求，这样我们就可以将哀求结果直接赋值给user数据，而不必要通过回调函数来获取哀求结果。
在调用getUser()函数时，我们通过try/catch语法来处理惩罚哀求错误。假如哀求出现错误，我们将错误打印到控制台中，这样我们就可以很容易地找到错误并举行处理惩罚。
结论

Axios是一个非常强大且易于使用的HTTP客户端库，它可以帮助我们轻松地发送HTTP哀求并处理惩罚哀求结果。在Vue项目中，我们通常会使用Axios来调用API并获取数据。通过使用Axios的哀求拦截器和相应拦截器，我们可以轻松地处理惩罚哀求和相应，并在出现错误时举行处理惩罚。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。