axios基础用法

概述：

1.axios：一个基于Promise用于浏览器和nodejs的HTTP客户端。本质是对ajax的封装。

特征：

1》从浏览器中创建XMLHttpRequest
2》从node.js发出http请求
3》支持Promise API
4》拦截请求和响应
5》转换请求和响应数据
6》取消请求
7》自动转换JSON数据
8》客户端支持防止CSRF/XSRF

2.安装

1》npm install axios
2》<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
import axios from "axios"

3.API

1》axios(config)
eg: axios({
    method:"post",
    url:"/user",
    data:{
        firstName:"nanhua",
        lastName:"qiushui"
    }
});
2》axios(url,config)    //默认为get请求
3》请求方法别名
    axios.request(config)
    axios.get(url,config)
    axios.post(url,data,config)
    axios.delete(url,config)
    axios.head(url,config)
    axios.put(url,data,config)
    axios.patch(url,data,config)
4》并发
    自定义配置创建axios实例
    var instance = axios.create({
        baseURL:"https://some-domain.com/api/",
        timeout:1000,
        headers:{"X-Custom-Header":"foobar"}
    })
    自定义实例默认值
    //创建实例时设置
    //实例创建后修改默认值（设置全局axios默认值）
    axios.defaults.baseURL = "https://api.example.com";
    axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
    axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";

    并发：axios.all(iterable)
    eg: axios.all([
        axios.get("https://api.github.com/xxx/1");
        axios.get("https://api.github.com/xxx/2");
    ]).then(axios.spread(function(userResp,reposResp){
        console.log("User",userResp.data);
        console.log("Repositories",reposResp.data);
    }))
    * 当所有的请求都完成后，会收到一个数组，它包含着响应对象，其中的顺序和请求发送的顺序相同，可以用axios.spread分割成多个单独的响应对象。
5》config参数
    baseURL: 'https://some-domain.com/api/',  //将自动加在url前面，除非url是一个绝对URL
    
    //允许在向服务器发送前，修改请求数据
    //只能用在PUT\POST\PATCH
    //后面数组的函数必须返回一个字符串/ArrayBuffer或Stream
    transformRequest:[function(data){
        //对data进行任意转换处理
        return data;
    }],

    //在传递给then/catch之前，允许修改响应数据
    transformResponse: [function (data) {
        return data;
    }],

    //即将被发送的自定义请求头
    headers:{
        'X-Requested-With': 'XMLHttpRequest'
    },

    //即将与请求一起发送的URL参数
    params:{
        ID: 12345
    },

    //负责params序列化的函数
    paramsSerializer:function(params){
        return Qs.stringify(params,{arrayFormat: "brackets"});
    },

    //超时
    timeout: 1000,

    //表示跨域请求时是否需要使用凭证
    withCredentials: false,

    //允许响应内容的最大尺寸
    maxContentLength: 2000,

    //对打重定向数目
    maxRedirects:5,

    //是否启用长连接
    httpAgent: new http.Agent({
        keepAlive: true
    }),
    httpsAgent: new https.Agent({
        keepAlive: true
    }),

    //代理服务器设置
    proxy:{
        host:"127.0.0.1",
        port: 9000,
        auth:{
            username:"nanhuaqiushui",
            password:"Huawei@123"
        }
    }

6》响应结构
{
    data:{},
    status:200,
    statusText:"OK",
    headers:{},  //服务器响应的头
    config:{}   //为请求提供的配置信息
}

7》拦截器
//请求拦截器
axios.interceptors.request.use(function(config){
    //发送请求之前做些什么
    return config;
},function(error){
    //请求错误之后做些什么
    return Promise.reject(error);
})
//响应添加拦截器
axios.interceptors.response.use(function(config){
    //发送请求之前做些什么
    return config;
},function(error){
    //请求错误之后做些什么
    return Promise.reject(error);
})

//移除拦截器
var myInterceptor = axios.interceptors.request.use(function(){
    ...
})
axios.interceptors.request.eject(myInterceptor);