Axios 的两种使用方法简单示例

最新推荐文章于 2024-07-25 22:35:58 发布

奋斗的吧小菜鸟

最新推荐文章于 2024-07-25 22:35:58 发布

阅读量5.4k

点赞数

文章标签： Axios JavaScript

本文链接：https://blog.csdn.net/luzhaopan/article/details/82107253

版权

在编写文件代码的过程中，往往需要请求后台的数据，下面介绍一下 Axios 方法的简单使用

1、直接使用，以下代码为在Vue文件中的 methods 方法中定义的获取后台数据的方法

methods: {
     
      // 连接后台获取数据的方法
      getData () {
        let params = {
          lt: '20180411',
          luzp: '20161122',
       
        }
       // /lt/luzp/luzplovelt 为后台接口
        axios.post(`/lt/luzp/luzplovelt`, params).then(res => {
          if (res.data.flag === 'SUCCESS') {
            this.data = res.data.data
            this.$message.success(res.data.msg)
          } else {
            this.$message.error(res.data.msg)
          }
        })
      }     
    }

2、在js文件中定义

<script>
 
  // 引入接口的 js 文件
  import { luzplt } from '../../../service/ration'
    
methods: {
      
     
      // 连接后台获取数据的方法
       getData () {
        let params = {
          lt: '20180411',
          luzp: '20161122',
        }
        luzplove.lut(params).then(res => {
          if (res.data.flag === 'SUCCESS') {
            this.data = res.data.data
            this.$message.success(res.data.msg)
          } else {
            this.$message.error(res.data.msg)
          }
        })
      }
    }

</script>

把接口写到 js 文件中 luzplt.js

import axios from '../../../service/http'


export class luzplove{
  // 查询信息
  static lut(data) {
    return axios.post(`/lt/luzp/luzplovelt`, data)
  }
}