VUE项目学习（八）：引用axios进行后端接口请求

电玩女神 2023-01-07 04:59 305阅读 0赞

## VUE项目学习（八）：引用axios进行后端接口请求 ##

axios是一个基于 promise 的 HTTP 库，是vue中比较常用的后端接口请求方法。

### 演示效果为： ###

![在这里插入图片描述][202101151801491.gif]

### 1、引入axios包 ###

（1）执行命令，在vue项目中安装axios

npm install axios --save

安装完成结果图为：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70]  
（2）在main.js中添加以下代码，全局引入axios

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

（3）在具体的vue文件中，直接使用this.$axios即可进行引用

### 2、vue中使用axios ###

（1）axios使用Get请求，实例如下：  
请求的地址为：[https://httpbin.org/get][https_httpbin.org_get]

this.$axios
              .get('https://httpbin.org/get')
              .then(response => (this.value = response.data.url))
              .catch(error => (console.log(error)))

效果为：  
![在这里插入图片描述][2021011517570360.png]

（2）axios使用Post请求，实例如下：  
请求的地址为：[https://httpbin.org/post][https_httpbin.org_post]  
请求参数为：\{“username”:“666666@qq.com”,“password”:“666”\}

let param = { "username":"666666@qq.com","password":"666"}
            this.$axios
              .post('https://httpbin.org/post', param)
              .then(response => (this.value = response.data.data))
              .catch(error => (console.log(error)))

效果为：  
![在这里插入图片描述][20210115175946767.png]

### 3、完整代码为 ###

<template>
      <div class="useaxios">
        <el-button type="primary" @click="sendGet()">请求Get接口</el-button>
        <el-button type="primary" @click="sendPost()">请求Post接口</el-button>
        <el-button type="warning" @click="reset()">重置结果</el-button>
        <div>
          <span>请求结果：</span>
          <span>{
       {value}}</span>
        </div>
      </div>
    </template>
    
    <script> export default { name: 'useaxios', data() { return { value: '' } }, methods: { sendGet() { this.$axios .get('https://httpbin.org/get') .then(response => (this.value = response.data.url)) .catch(error => (console.log(error))) }, sendPost() { let param = { "username":"666666@qq.com","password":"666"} this.$axios .post('https://httpbin.org/post', param) .then(response => (this.value = response.data.data)) .catch(error => (console.log(error))) }, reset() { this.value = '' } } } </script>
    
    <style> .useaxios { text-align: left; } </style>

[202101151801491.gif]: /images/20221119/8b9aea013aea4ace9e2097a09c1f06d6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210115170137645.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3,size_16,color_FFFFFF,t_70
[https_httpbin.org_get]: https://httpbin.org/get
[2021011517570360.png]: https://img-blog.csdnimg.cn/2021011517570360.png
[https_httpbin.org_post]: https://httpbin.org/post
[20210115175946767.png]: https://img-blog.csdnimg.cn/20210115175946767.png