Axios 的两种使用方法

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

Axios 的两种使用方法

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。axios本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范。

它本身具有以下特征：

a.从浏览器中创建 XMLHttpRequest b.从 node.js 发出 http 请求 c.支持 Promise API e.拦截请求和响应 f.转换请求和响应数据 g.取消请求 h.自动转换JSON数据 i.客户端支持防止 CSRF/XSRF

在我们做项目编写文件代码的过程中，往往需要请求后台的数据，可以通过Axios方法实现，简单使用如下:

首先利用npm安装npm install axios --save

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)
  }
}