axios学习

axios

1、什么是axios？

随着 vuejs 作者尤雨溪在2016年发布消息，不再继续维护vue-resource，并推荐大家使用 axios 开始，axios 被越来越多的人所了解。目前已经是最流行的前端ajax请求库。

功能特点

• 在浏览器中发送Ajax请求。
• 在node.js中发送http请求。
• 支持promise api
• 拦截请求和响应
• 转换请求和响应数据
• 取消请求
• 自动转换JSON数据
• 客户端支持防止 CSRF/XSRF

2、引入方式

<!-- npm yarn是以后项目中常用到的，cdn是学习阶段比较好用的 -->
$ npm install axios
$ cnpm install axios //taobao源
<!-- 或者使用cdn：推荐国内的www.bootcdn.cn/ -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

3、使用举例

axios({
    method:"get",
    url:"localhost：3000/list",
    data:{
        id:123
    }
}).then(response=>{
    console.log(response);
}).catch(function (error) {
    console.log(error);
});

4、其他发送方法

4.1 实现get请求

// 向具有指定ID的用户发出请求
axios.get('/user?ID=12345')
    .then(function (response) {
    console.log(response);
})
    .catch(function (error) {
    console.log(error);
});
// 也可以通过 params 对象传递参数
axios.get('/user', {
    params: {
        ID: 12345
    }
})
    .then(function (response) {
    console.log(response);
})
    .catch(function (error) {
    console.log(error);
});

4.2 实现POST请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
})
    .then(function (response) {
    console.log(response);
})
    .catch(function (error) {
    console.log(error);
});

4.3 发送多个请求

function getUserAccount() {
    return axios.get('/user/12345');
}
function getUserPermissions() {
    return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
    .then(axios.spread(function (acct, perms) {
    //两个请求现已完成
}));

5、返回结果解析

6、配置对象说明

{
    // `url`是将用于请求的服务器URL
    url: '/user',

        // `method`是发出请求时使用的请求方法
    method:"get"

    // `baseURL`将被添加到`url`前面，除非`url`是绝对的。
    // 可以方便地为 axios 的实例设置`baseURL`，以便将相对 URL 传递给该实例的方法。
    baseURL: 'https://some-domain.com/api/',

    // `headers`是要发送的自定义 headers
    headers: {'X-Requested-With': 'XMLHttpRequest'},

                    // `params`是要与请求一起发送的URL参数
                    // 必须是纯对象或URLSearchParams对象
    params: {
          ID: 12345
    }

    // `data`是要作为请求主体发送的数据
    // 仅适用于请求方法“PUT”，“POST”和“PATCH”
    data: {
        firstName: 'Fred'
    },

    // `timeout`指定请求超时之前的毫秒数。
    // 如果请求的时间超过'timeout'，请求将被中止。
    timeout: 1000,
// “responseType”表示服务器将响应的数据类型
    // 包括 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
    responseType: 'json', // default
}

7、默认配置

axios.defaults.method = "get";
axios.defaults.baseURL = "http://localhost:3000";

8、创建实例对象发送请求

如果一个页面有多个请求服务器，比如 www.a.com和www.b.com，我们每次发送请求时，都要将域名写一遍，十分麻烦，如果设置默认配置，又只能设置一个，这个时候我们就可以创建实例对象，去发送请求，

var instance = axios.create({
  baseURL: 'https://www.a.com/api/',
  timeout:2000
});
instance.get("/list").then(response =>{
   console.log(response) 
});

9、拦截器

拦截器就是一些函数，共分为两大类：请求拦截器和响应拦截器

请求拦截器作用：在发送请求之前，对请求的参数或者内容进行一些处理或校验，如果没有问题，再去发送请求，否则取消请求。

响应拦截器作用：

//添加请求拦截器
axios.interceptors.request.use（function（config）{
     //在发送请求之前做某事
     return config;
   }，function（error）{
     //请求错误时做些事
     return Promise.reject（error）;
   }）;

//添加响应拦截器
axios.interceptors.response.use（function（response）{
     //对响应数据做些事
      return response;
   }，function（error）{
     //请求错误时做些事
     return Promise.reject（error）;
   }）;