基本安装：

npm install axios -S
​
npm install vue-axios -S

引入：

在 main.js 中写入以下内容：

//Axios-http请求
import axios from 'axios'
import VueAxios from 'vue-axios'
​
Vue.use(axios,VueAxios)

使用方法：

• config – 选项对象、例如查询参数、请求头…
• data – 请求体数据、最常见的是 json 格式数据
• get、head 请求无法携带请求体，这应当是浏览器的限制所致（xhr、fetch api 均有限制）
• options、delete 请求可以通过 config 中的 data 携带请求体

使用：

<template>
    <div>
        <input type="button" value="获取远程数据" @click="sendReq()">
    </div>
</template>
<script>
import axios from 'axios'
const options = {
    methods: {
        async sendReq() {
            // 1. 基础请求 get, post
            const resp = await axios.post('/api/a2');
​
            // 2. 携带请求头
            const resp = await axios.post('/api/a3',{},{
                headers:{
                    Authorization:'abc'
                }
            });
​
            // 3.携带请求参数
            // 3.1 不想自己拼串、处理特殊字符、就用下面的办法
            const resp = await axios.post('/api/a4', {}, {
                params: {
                    name:'&&&&',
                    age: 20
                }
            });
            // 3.2 发送请求时携带查询参数 ?name=xxx&age=xxx
            const name = encodeURIComponent('&&&');
            const age = 18;
            const resp = await axios.post('/api/a4?name=${name}&age=${age}');//``
​
            // 4.携带请求体
            // 4.1 用请求体发数据，格式为 json (推荐)
            const resp = await axios.post('/api/a5json', {
                name: '王五',
                age: 50
            });
            
            // 4.2 用请求体发数据，格式为 urlencoded
            const params = new URLSearchParams();
            params.append("name", "张三");
            params.append("age", 24)
​
            const resp = await axios.post('/api/a4', params);
​
            // 4.3 用请求体发数据，格式为 multipart
            const params = new FormData();
            params.append("name", "李四");
            params.append("age", 30);
            const resp = await axios.post('/api/a5', params);
            
            
            console.log(resp);
        }
    }
};
export default options;
</script>

使用实例：

说明：为请求提供默认配置

const _axios = axios.create(config);

• axios 对象可以直接使用，但使用的是默认的设置
• 用 axios.create 创建的对象，可以覆盖默认设置，config 见下面说明

常见的 config 项有

例：

const _axios = axios.create({
    baseURL: 'http://localhost:8080',
    withCredentials: true
});
await _axios.post('/api/a6set')
await _axios.post('/api/a6get')

• 生产环境希望 xhr 请求不走代理，可以用 baseURL 统一修改
• 希望跨域请求携带 cookie，需要配置 withCredentials: true，服务器也要配置 allowCredentials = true，否则浏览器获取跨域返回的 cookie 时会报错

响应格式：

• 200 表示响应成功
• 400 请求数据不正确 age=abc
• 401 身份验证没通过
• 403 没有权限
• 404 资源不存在
• 405 不支持请求方式 post
• 500 服务器内部错误

拦截器：

请求拦截器：

_axios.interceptors.request.use(
  function(config) {
    // 比如在这里添加统一的 headers
    return config;
  },
  function(error) {
    return Promise.reject(error);
  }
);

响应拦截器：

_axios.interceptors.response.use(
  function(response) {
    // 2xx 范围内走这里
    return response;
  },
  function(error) {
    // 超出 2xx, 比如 4xx, 5xx 走这里
    return Promise.reject(error);
  }
);