axios在vue中的使用

一、Axios是什么

• Axios是一个基于promise的HTTP库（类似于jQuery的Ajax，用于HTTP请求）
• 可以用于浏览器和node.js（既可以用于客户端也可以用于node.js编写的服务端）

二、Axios有哪些特性

• 支持promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换 JSON 数据
• 客户端支持防御 XSRF

三、Axios浏览器支持

四、安装

1.使用 npm:

$ npm install axios

2.使用 bower:

$ bower install axios

3.使用 cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

五、用法（vue项目已搭建）

1. Axios基础用法（get、post、put 等请求方法）

先介绍一下，Axios常用的几种请求方法有哪些：get、post、put、patch、delete

get：（一般用于）获取数据

post：提交数据（表单提交+文件上传）

put：更新（或编辑）数据（所有数据推送到后端（或服务端））

patch：更新数据（只将修改的数据推送到后端）

delete：删除数据

题外话，一般公司在实际开发项目过程中：

（1）post：一般用于新建

（2）put：一般用于更新（适合数据量比较少的更新）

（3）patch：一般用于数据量比较大；假如一个表单的数据量很大，有很多项，使用put的话，全部数据推送一次是比较耗性能的，这个时候可以考虑用patch，只将修改的数据推送到后端

以上这些题外话，只是一般的常规用法，不能代表一定要这样用；当然了，你可能会说我用post来获取数据，行不行？这个当然行了，绝对没问题！具体怎么用还是前后端一起商量着决定，以免发生不愉快的肢体冲突！

哈哈哈，严重了啊，开个玩笑！

（1）get 请求

<template>
  <div>
    <div>mmmm</div>
  </div>
</template>

<script>
import axios from 'axios'

// get 请求
export default {
  name: "get",
  created() {

    //第一种写法叫做get别名请求方法
    //http://localhost:8080/static/data.json?id=1
    axios.get('../../static/data.json', {
      params: {//有参数时,若无参数时直接省略不写
        id: 1
      }
    }).then((res) => {
      console.log('数据：', res);
    })

    //第二种写法
    axios({
      method: 'get',
      url: '../../static/data.json',
      params: {
        id: 1
      }
    }).then((res) => {
      console.log('数据：', res)
    })
  }
}
</script>

<style scoped>

</style>

下面了解一下请求信息—

**Status Code:304 Not Modified—**304是重定向；正常情况下，第一次访问接口的时候返回的 都是200；当你第二次访问接口的时候，如果数据没有变化， 那么浏览器会自动识别返回一个状态304，代表数据没有更改 、重定向；相当于重定向到你刚刚访问的资源，这样的话会加载 更快！