AXIOS 用法

1. axios [https://github.com/axios/axios] 是一个基于 Promise 用于浏览器和nodejs 的HTTP客户端

2. axios 基本用法：

• 语法规则：

<script>
axios.get(url)
    .then(ret=>{
        // data 属性名称是固定的，用于获取后台响应的数据
        console.log(ret.data)
    })
</script>

• 案例：

<script src="js/axios.js"></script>
<script>
    /* 
        axios 基本用法
        */
        axios.get('http://localhost:3000/adata').then((ret)=>{
            console.log(ret.data);
        })
</script>

3. axios 常用的 API

• get

1. 根据url传递参数

<script>
// 1. axios 的 get 请求方式
// url
axios.get('http://localhost:3000/axios?id=123').then((ret)=>{
            console.log(ret);
            console.log(ret.data);
        })

// restful
axios.get('http://localhost:3000/axios/=123').then((ret)=>{
    console.log(ret);
    console.log(ret.data);
})
</script>

2. 通过 params 选项传递参数

<script>
// params 传参
axios.get('http://localhost:3000/axios/', {
    params:{
        id:789,
    }
})
    .then((ret)=>{
        console.log(ret);
        console.log(ret.data);
    })
</script>

• delete
  1. 根据url传递参数
  2. 通过 params 选项传递参数

<script>
// 2. axios 的 delete请求
// params 传参 DELETE
axios.delete('http://localhost:3000/axios/', {
        params:{
            id:123,
        }
    })
    .then((ret)=>{
        console.log(ret);
        console.log(ret.data);
    }) 
</script>

• post

<script>
// 3 axios 的 post 请求
 // 3.1 通过 params 传递参数
axios.post('http://localhost:3000/axios', { 
        uname: 'lisi', pwd: 123 
    }).then(function(ret){ 
        console.log(ret.data) 
    })

// 3.2 通过 URLSearchParams 传递参数 
var params = new URLSearchParams(); 
params.append('uname', 'zhangsan'); 
params.append('pwd', '111'); 
axios.post('http://localhost:3000/axios', params)
    .then(function(ret){ 
        console.log(ret.data) 
    })
</script>

• put

<script>
// 4. axios put 请求
        axios.put('http://localhost:3000/axios/123', {
            uname:'lizi',
            pad:123456
        }).then((ret)=>{
                console.log(ret);
                console.log(ret.data);
            }) 
</script>

4. axios 的响应结果

- data：实际响应回来的数据
- headers：响应头信息
- status：响应状态码
- statusText：响应状态信息

5. axios 的全局配置

- axios.defaluts.timeout = 3000; // 超时事件
- axios.defaluts.baseURL = 'url'; // 默认地址
- axios.defaults.headers['mytoken'] = 'aduvfbdhgjbvdfbvjsdklbjdvbj54ffd45' // 设置请求头

<script type="text/javascript">
    /* 
        axios 响应结果与全局配置
        */

    // 1. 全局配置请求的基本url  BaseURL:
    axios.defaults.baseURL = 'http://localhost:3000/';

    // 2. 全局配置请求头信息 headers：
    axios.defaults.headers['mytoken']='hello';

    axios.get('axios-json')
        .then((ret)=>{
            console.log(ret);
            console.log(ret.data.uname);
        }) 
</script>

6. axios 拦截器

• 请求拦截器：发出请求之前设置一些信息
• 响应拦截器：在获取数据之前对数据做一些加工处理

<script>
// 添加一个请求拦截器
axios.interceptors.response.use((res)=>{
    // 在这里对返回的数据进行处理
    return res;
},(err)=>{
    // 处理响应的错误信息
});

//axios设置请求拦截器
axios.interceptors.request.use(config => {
    console.log(config.url);
    config.headers.mytoken = 'nihao' //设置响应头
    return config; //  必须要返回config
}, err => {
    // 设置处理错误的信息
    console.log(err);
})

// axios 设置响应拦截器
axios.interceptors.response.use(res => {
    // console.log(res)
    var data = res.data;
    return data; //  必须要返回config
}, err => {
    // 设置处理错误的信息
    console.log(err);
})

axios.get('http://localhost:3000/adata')
    .then((data)=>{
        console.log(data);
    })
</script>