axios学习笔记

1、安装axios

npm安装：npm install axios --save
yarn安装：yarn add axios
Vue安装：vue add axios

2、发送请求

有三种发送请求的方式：axios.get()、axios.post()、axios.all()

    axios.get('/user?ID=12345')    //get请求
        .then(function(res){
            console.log(res.data);    //返回获取的数据
            console.log(res.status);    //返回状态码：200、404
            console.log(res.statusText);    //返回状态文本：OK
            console.log(res.headers);    //返回响应头信息
            console.log(res.config);    //返回请求的配置信息
        }).catch(function(err){
            console.log(err)
        })
      
      
    axios.post('/user',{    //post请求
        name:'cai',
        pwd:'111'
    })
    .then(function(response){
        //请求成功
    })
    .then(function(err){
        //请求失败
    })
    
    
    function getUser(){
        return axios.get('/user/1234');
    }
    function getInfo(){
        return axios.get('/user/1234/info')
    }
    axios.all([getUser(),getInfo()])        //并发请求
    .then(axios.spread(function(user,info){
        //当这两个请求都完成的时候会触发这个函数，两个参数分别代表返回的结果
    }))
    并发的API为:
    axios.all(iterable);
    axios.spread(callback);
    
    请求方式的别名:
    axios.request(config);
    axios.get(url[,config]);
    axios.delete(url[,config]);
    axios.head(url[,config]);
    axios.post(url[,data[,config]]);
    axios.put(url[,data[,config]]);
    axios.patch(url[,data[,config]])

3、axios全局默认配置

axios.defaults.baseURL='http://api.exmple.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['content-Type'] = 'appliction/x-www-form-urlencoded';
axios.defaults.withCredentials = true;   // axios 默认不发送cookie，需要全局设置true发送cookie
axios.defaults.baseURL = $core.use('http'); //确认协议和地址

4、自定义axios的配置

var instance=axios.create({
    url:'/user',    //如果不是绝对地址，baseURL会自动加到url前面
    methods:'post',    //默认为 get 
    baseURL:'https://www.xxx.com/api/',
    params:{   
        id:123    //参数
    },
    data:{
        name:'cai',    //需要被发送的数据仅适用于：put、post、patch
        age:18    //当没有设置`transformRequest`选项时dada必须是以下几种类型之一
        //string/plain/object/ArrayBuffer/ArrayBufferView/URLSearchParams
        //仅仅浏览器：FormData/File/Bold
        //仅node:Stream
    }
    paramsSerializer: function(params){    //序列化参数 （可选）
        return Qs.stringify(params,{arrayFormat:'brackets'})
    },
    transformRequest:[function(data){    //请求发送到服务器之前，可在这对发送的数据做些改动，仅限于put、post、patch方法
        return data;    //数组里面的最后一个函数必须返回一个字符串、-一个`ArrayBuffer`或者`Stream`
    }],
    transformResponse:[function(data){    //在数据传送到`then/catch`方法之前对得到的数据进行改动
        return data;
    }],
    timeout:1000,    //请求超时最长1000毫秒
    headers: {'X-Requested-With':'XMLHttpRequest'},
    withCredentials：true,    //是否跨域请求，默认为false(跨域需要用到证书)
    adapter：function(){
        //返回一个promise,并提供验证返回
        //可自定义处理请求，用于测试
    },
    auth:{    //开启http用户认证，重新设置Authorization头信息
        username:'cai',
        password:'123456'
    },
    responseType:'json',    //可选项是arraybuffer,blob,document,json,text,stream
    xsrfCookieName: 'XSRF-TOKEN',//用作 xsrf token 值的 cookie 名称
    xsrfHeaderName:'X-XSRF-TOKEN',//带有 xsrf token 值 http head 名称
    onUploadProgress:function(progressEvent){
        //上传进度事件，允许在上传过程中的做一些操作
    },
    onDownloadProgress:function(progressEvent){
        //下载进度事件，允许在下载过程中的做一些操作
    },
    maxContentLength:2000,    //相应内容最大值
    validateStatus:function(status){    //定义了是否根据http相应状态码，来resolve或者reject promise
        return status >= 200 && status <300;//default
    },
    maxRedirects: 5,    //在nodejs中重定向的最大数量
    httpAgent: new http.Agent({keeyAlive:true}),    //定义了当发送http请求要用到的自定义代理(默认：false)
    httpsAgent: new https.Agent({keeyAlive:true}),    //定义了当发送https请求要用到的自定义代理（默认：false）
    proxy: {
        host:'127.0.0.1',    //proxy定义了主机名字和端口号
        port: 9000,
        auth: {
            username:'Cai',
            password:'123456'
        }
    },
    cancelToken: new cancelToken(function(cancel){
        //cancelToken定义了一个用于取消请求的cancel token
    })
})

//当实例创建时候修改配置
instance.defaults.headers.common["Authorization"] = AUTH_TOKEN;

//使用自定义的axios实例
instance.get('/longRequest',{    //这里的配置优先级高于上面的
  timeout: 5000    //5秒后请求
});

5、拦截器

//你可以在请求、响应在到达then/catch之前拦截他们
//添加一个请求拦截器
axios.interceptors.request.use(function(config){
    //在请求发出之前进行一些操作，比如：显示loading图标
    return config;
},function(err){
    //Do something with request error
    return Promise.reject(error);
});
//添加一个响应拦截器
axios.interceptors.response.use(function(res){
    //在这里对返回的数据进行处理，比如隐藏loading图标
    return res;
},function(err){
    //Do something with response error
    return Promise.reject(error);
})

//取消拦截器
var myInterceptor = axios.interceptor.request.use(function(){/*....*/});
axios.interceptors.request.eject(myInterceptor);

//给自定义的 axios 实例添加拦截器
var instance = axios.create();
instance.interceptors.request.use(function(){})

6、错误处理

axios.get('/user/12345')
    .catch(function(error){
        if(error.response){
          //请求已经发出，但是服务器响应返回的状态吗不在2xx的范围内
          console.log(error.response.data);
          console.log(error.response.status);
          console.log(error.response.header);
        }else {
          //一些错误是在设置请求的时候触发
          console.log('Error',error.message);
        }
        console.log(error.config);
    });
  

7、取消请求

var CancelToken = axios.CancelToken;    //通过一个cancel token来取消一个请求
var source = CancelToken.source();    //通过CancelToken.source工厂函数来创建一个cancel token

axios.get('/user/12345',{
    cancelToken: source.token
}).catch(function(thrown){
    if(axios.isCancel(thrown)){
        console.log('取消请求',thrown.message);
    }else {
        //handle error
    }
});
//取消请求（信息的参数可以设置的）
source.cance("操作被用户取消");


//换种写法
var cancelToken = axios.CancelToken;
var cance;
axios.get('/user/12345',{
    cancelToken: new CancelToken(function(c){
        //这个executor函数接受一个cancel function作为参数
        cancel = c;
    })
})
//取消请求
cancel();

8、get/delete 请求，也称作 query 请求

axios.get('/user', {  //params参数必写 , 如果没有参数传{}也可以
    params: {  
       id: 12345，
       name: user
    }
})
.then(function (res) {
    console.log(res);
})
.catch(function (err) {
    console.log(err);
});

9、post/put/patch 请求（三种传参方式）

1、传参格式为 formData 
    var formData=new new FormData();
    formData.append('user','cai');
    formData.append('pwd',123456);
    axios.post('notice',formData)
        .then((res)=>{return res})
        .catch((err)=>{return err})
        
2、传参格式为 query 形式
    第一种情况：使用 $qs.stringify
        import Qs from 'qs'   //引入方式
        Vue.prototype.$qs = Qs  //全局加载
        this.$qs.stringify(data);  //使用方式
        this.$qs.parse(data);  //使用方式
        var readyData=this.$qs.stringify({
            id:1234,
            name:user
        });
        axios.post("/notice",readyData)
             .then((res) => {return res})
             .catch((err) => {return err})
    第二种情况：使用 URLSearchParams（浏览器不支持，需要polyfill）
        var params = new URLSearchParams();
        params.append('param1', 'value1');
        params.append('param2', 'value2');
        axios.post('/foo', params);
        
3、 传参格式为 raw (JSON 格式) 
     第一种情况： axios 将 JavaScript 对象序列化为 JSON
        var readyData={
            id:1234,
            name:user
        };
        axios.post("/notice",readyData)
             .then((res) => {return res})
             .catch((err) => {return err})
     第二种情况：
         var readyData=JSON.stringify({
              id:1234,
              name:user
         });
         axios.post("/notice",readyData)
              .then((res) => {return res})
              .catch((err) => {return err})