一、axios是什么？

axios 是功能强大的网络请求库，基于promise的http库，可以发送get、post请求，也是Vue，React的出现促使axios轻量级库的出现。

二、在项目中安装axios库

打开项目目录，在终端中输入

npm install axios -S

之后等待安装完成即可

三、GET请求

• 请求模板

import axios from 'axios'  //引入axios

axios.get('接口地址', {params: {参数一:'值' ,参数二:'值', ...})
  .then(res => {
     /*
         res.data 为后端接口返回的json数据
     */
     console.log(res.data)  //控制台输出后端json数据
  })
  .catch(err => {
     console.log(err)  //控制台输出异常
  })

• 请求示例

例如，我想通过GET请求获取接口 http://localhost:8080/api/getUserList?method=limit&start=0&end=10 中的数据，我可以这样写：

import axios from 'axios';  //引入axios

export default {
  data() {
    return {
      tableData:[]
    }
  },
  methods: {
    getUserList() {
      axios.get('http://localhost:8080/api/getUserList', {params: {method:'limit' , start:'0', end:'10'})
        .then(res => {
           this.tableData = res.data  //将后端返回的json对象储存至tableData这个数组中
           console.log(res.data);  //控制台输出后端json数据
        })
        .catch(err => {
           console.log(err);  //控制台输出异常
        })
      }
    }
  },
  create() {
    this.getUserList();
  }
}

上述代码中，params为参数选项，按需求选择，非必须

params中的参数是添加到url的请求字符串中的，用于GET请求

四、POST请求

• 请求模板

import axios from 'axios'  //引入axios
axios.post('接口地址', {data: {参数一:'值' ,参数二:'值', ...})
  .then(res => {
     /*
         res.data 为后端接口返回的json数据
     */
     console.log(res.data)  //控制台输出后端json数据
  })
  .catch(err => {
     console.log(err)  //控制台输出异常
  })

• 请求示例

例如，我想通过POST请求，将数据发送到接口 http://localhost:8080/api/setUserData 中，我可以这样写：

import axios from 'axios';  //引入axios

export default {
  data() {
    return {
      formData:{
        name: '李锦成',
        gender: '男',
        age: '19'
      }
    }
  },
  methods: {
    setUserData() {
      axios.post('http://localhost:8080/api/getUserList', {data: formData})
        .then(res => {
           if(res.data.code === 200) { //从后端返回的结果中读取状态码（code），后端以状态码为200为成功（根据接口而定）
             this.$message.success('操作成功');
           } else {
             this.$message.error(res.data.msg);
           }
        })
        .catch(err => {
           console.log(err);  //控制台输出异常
        })
      }
    }
  } //组件调用：@click="setUserData"
}

五、通用请求

import axios from 'axios';  //引入axios

axios({
  method: '请求方式', // 填get或post
  url: '接口地址',

  params: {json格式的参数}, // 若为get请求则使用params
  data: {json格式的数据}, // 若为post请求则使用data
  headers: { //请求头，默认是Content-Type: application/json
    'Content-Type': 'Content-Type: application/json'
  }
})
  .then(res => {
    console.log(res)  //控制台输出后端json数据
  })
  .catch(err => {
    console.log(err)  //控制台输出异常
  })

关于headers

① ‘Content-Type: application/json ‘：是默认的格式。请求体中的数据会以json字符串的形式发送到后端。

② ‘Content-Type: application/x-www-form-urlencoded’：请求体中的数据会以普通表单形式（键值对）发送到后端。

③ ‘Content-Type: multipart/form-data’：它会将请求体的数据处理为一条消息，以标签为单元，用分隔符分开。既可以上传键值对，也可以上传文件。