axios的使用

一、axios的定义：

Axios 是一个基于 Promise 的 HTTP 状态库，是封装的ajax，可以用在浏览器和 node.js 中。

二、安装方法

安装命令： npm install axios
在页面中引入：import axios from “axios”;

三、GET请求

<template>
  <div id="app">
    {{ info }}
  </div>
</template>
<script>
  import axios from "axios";
  export default {
    data () {
      return {
        info: null
      }
    },
    mounted () {
      axios.get('https://www.runoob.com/try/ajax/json_demo.json')
        .then(response => (this.info = response))
        .catch(function (error) { // 请求失败处理
          console.log(error);
        });
    }
  }
</script>

四、POST请求

axios.post 默认请求头：application/json url 请求参数 对象

<template>
  <div id="app">
    {{ info }}
  </div>
</template>
<script>
  import axios from "axios";
  export default {
    data () {
      return {
        info: null
      }
    },
    mounted () {
      axios.post('https://www.runoob.com/try/ajax/demo_axios_post.php')
        .then(response => (this.info = response))
        .catch(function (error) { // 请求失败处理
          console.log(error);
        });
    }
  }
</script>

五、axios的封装

// 对http请求进行封装
import axios from 'axios'

// 使用自定义的配置文件发送请求
const instance = axios.create({
  baseURL: '',
  timeout: 5000,
  headers: {
  }
});
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
  return config;
}, function (error) {
  return Promise.reject(error);
});

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
  if(response.status === 200){
    return response.data;
  }else{
    console.error("请求错误")
    console.error(response)
  }
  return response;
}, function (error) {
  return Promise.reject(error);
});
export default instance