axios的基本使用

1 使用json-server创建一个假的rest api服务

1 安装 npm install -g json-server 
2 创建一个json文件
3 启动服务 json-server --watch db.json

2 axios 的特点

1 Make XMLHttpRequests from the browser  在浏览器端发送Ajax请求
2 Make http requests from node.js  在node.js中发送http请求
3 Supports the Promise API  支持promise的相关操作
4 Intercept request and response  **请求响应拦截器 非常重要**
5 Transform request and response data 对请求和响应数据做转换
6 Cancel requests 取消请求
7 Automatic transforms for JSON data  自动将结果准换为json数据 
8 Client side support for protecting against XSRF 做保护 阻挡一些跨站攻击

3 安装axios

```
---Using npm:
$ npm install axios

---Using bower:
$ bower install axios

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

4 常用的属性

1 //请求类型
method: 'POST',
2 //URL
url: 'http://localhost:3000/posts',
3 //设置请求体
data: {
    title: "今天天气不错, 还挺风和日丽的",
    author: "张三"
}

5 发送请求的常用方法

1 axios 函数
    ```
    btns[0].onclick = function(){
        //发送 AJAX 请求
        axios({
            //请求类型
            method: 'GET',
            //URL
            url: 'http://localhost:3000/posts/2',
        }).then(response => {
            console.log(response);
        });
    }

    ```

2 request
    ```
    btns[0].onclick = function(){
        // axios()
        axios.request({
            method:'GET',
            url: 'http://localhost:3000/comments'
        }).then(response => {
            console.log(response);
        })
    }
    ```
3 post
    ```
    btns[0].onclick = function(){
        // 参数  url data请求体 config配置对象 2 3可选
        axios.post(
            'http://localhost:3000/comments', 
            {
                "body": "test",
                "postId": 2
            }).then(response => {
                console.log(response);
            })
    }
    ```

6 axios响应结果

1 config 配置对象
2 data 响应体 服务器返回的结果
3 headers 响应头信息
4 request 原生的ajax请求对象
5 status 响应状态码
6 statusText 响应状态字符串

7 axios 请求常用配置对象

url      // 请求路径
method   // 请求方法  默认get
baseURL  //设定url的基础结构
transformRequest  //预处理 
transformResponse
headers  // 头信息
params   // 请求参数
proxy  // 代理

8 axios默认配置 简化代码

```
    axios.defaults.method = 'GET';//设置默认的请求类型为 GET
    axios.defaults.baseURL = 'http://localhost:3000';//设置基础 URL
    axios.defaults.params = {id:100};
    axios.defaults.timeout = 5000;// 请求超时时间

    btns[0].onclick = function(){
        axios({
            url: '/posts'
        }).then(res => {
            // 拿到结果
            console.log(res.data);
        })
    }
```

9 axios创建实例对象 发送请求

```
    const test1 = axios.create({
        baseURL: 'https://a.com',
        timeout: 2000
    });

    const test2 = axios.create({
        baseURL: 'https://b.com',
        timeout: 2000
    });
```

10 axios 拦截器

1 什么是拦截器
 就是一些函数 分为两类，请求拦截器和响应拦截器

2 请求拦截器
  在发送请求之前 借助一些函数 来对请求参数和内容做处理检测 如果都没有问题再去发送请求  如果有问题则取消发送
    ```
        // config 配置对象
        axios.interceptors.request.use(function (config) {
            console.log('请求拦截器 成功');
            if(config.params === ''){
                throw '参数不能为空！！！'
            }else{
                config.params = {a:100};
                return config;
            }
        }, function (error) {
            console.log('请求拦截器 失败');
            return Promise.reject(error);
        });
    ```

3 响应拦截器
    当服务器返回结果之前 先对结果做一些预处理
    ```
        // response 响应结果
        axios.interceptors.response.use(function (response) {
            console.log('响应拦截器 成功');
            return response.data;
            // return response;
        }, function (error) {
            console.log('响应拦截器 失败')
            return Promise.reject(error);
        });
    ```