axios的请求基本使用

axios网络请求
    1、安装
        cnpm install axios -S

    2、在main.js中引入
        import Axios from 'axios'

    3、在main.js中将Axios挂载到Vue的原型上(可选)
        Vue.prototype.$axios=Axios
    
    4、axios配置
        axios({
            baseURL:'',   路径前缀,会将url的路径添加到后面
            url:'',
            method: 'get',  不写默认是 get
            timeout:n毫秒,    请求超时时间,若超过则取消
            transformRequest: [function (data, headers) { 允许在向服务器发送前,修改请求数据,只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
                对data进行任意转换处理,必须返回一个字符串,或ArrayBuffer,或Stream
                return data;    
            }],
            transformResponse: [function (data) { 在传递给then/catch前,允许修改响应数据
                   return data;
            }],
            headers: {'X-Requested-With': 'XMLHttpRequest'},    自定义请求头
            params: {    会被添加到url中的请求参数
                ID: 12345
            },
            paramsSerializer: function(params) {    参数序列化,如get请求传递的参数是个数组且报错,就可以使用这个选项将其序列化
              不配置该参数,数组会默认转换为类似ids[]=1&ids[]=2&ids[]=3
              return qs.stringify(params, {arrayFormat: 'brackets'})    转换成类似ids[]=1&ids[]=2&ids[]=3
              return qs.stringify(params, {indices: false)                转换成类似ids=1&ids=2&id=3
              return qs.stringify(params, {arrayFormat: 'indices'})        转换成类似ids[0]=1&aids1]=2&ids[2]=3
              return qs.stringify(params, {arrayFormat: 'repeat'})        转换成类似ids=1&ids=2&id=3
              
            },
            data:{作为请求主体被发送的数据,适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
                键值对,会将请求体转换成json格式
            },
            data:'name=jeff&age=18',    会将请求体转换成url参数形式,即表单形式    
            withCredentials: false,    跨域请求时是否需要使用凭证
            adapter: function (config) {    请求适配器设置,如前台发送ajax、nodejs中发送http请求
                返回一个 promise 并应用一个有效的响应
            },
            auth: {    使用HTTP基础验证,并提供凭据这将设置一个`Authorization` 头,覆写掉现有的任意使用`headers`设置的自定义`Authorization`头
              username: 'janedoe',
              password: 's00pers3cret'
            },
            responseType: 'json',    服务器响应的数据类型,可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
            responseEncoding: 'utf8',    表示解码响应时使用的编码
            
            服务器返回结果时会返回唯一的标识,下次发送请求得传递标识,检测成功才会相应,避免响应其他客户端发送的请求
                xsrfCookieName: 'XSRF-TOKEN',    跨域请求cookie的标识
                xsrfHeaderName: 'X-XSRF-TOKEN',    跨域头信息设置
                
            onUploadProgress: function (progressEvent) { 上传处理进度事件
                ...
              },
              onDownloadProgress: function (progressEvent) {    下载处理进度事件
                  ...
            },
            maxContentLength: 2000,    允许的响应内容的最大尺寸
            maxRedirects: 5,    定义在node.js中follow的最大重定向数目
            validateStatus: function (status) {    定义对于给定的HTTP响应状态码是resolve或reject  promise,如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`),promise将被resolve; 否则,promise将被rejecte
                return status >= 200 && status < 300; // default
            },
            socketPath: null,    定义在node.js中使用的UNIX Socket的路径位置,如果使用了proxy代理,优先使用socketPath;
            httpAgent: new http.Agent({ keepAlive: true }),`httpAgent` 和 `httpsAgent` 分别在 node.js 中用于定义在执行http和https时使用的自定义代理,允许像这样配置选项：
            httpsAgent: new https.Agent({ keepAlive: true }),

           这将会设置一个`Proxy-Authorization`头,覆写掉已有的通过使用`header`设置的自定义 `Proxy-Authorization` 头。
            proxy: {     'proxy' 定义代理服务器的主机名称和端口
              host: '127.0.0.1',
              port: 9000,
              auth: {    `auth` 表示 HTTP 基础验证应当用于连接代理，并提供凭据
               username: 'mikeymike',
               password: 'rapunz3l'
             }
            },
            cancelToken: new CancelToken(function (cancel) {
                取消axios请求的配置
            })
        })
        
        
    4.5、axios全局配置:
        全局axios配置:
            所有的请求都会生效
            axios.defaults.属性='xxxx'
            
        自定义实例配置:
            const instance = axios.create({
              baseURL: 'https://api.example.com'
            });
            instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;
            

            
    5、axios实例
        可用于创建不同域名的请求
        const instance=axios.create({
            配置
        })
        使用: 使用方式和axios的两种方式相同
        instance({url:'',...}).then((res)=>{...})
        instance.get('url',{...}).then(res=>{...})        
    
    6、在组件函数中使用
        (1)get请求:

             axios.get("url",{配置})
            .then(res=>{ res.data获取数据})
            .catch(err=>{console.log(err)})//错误捕捉

        (2)get请求传参:
            方式一:在url后拼接参数
            方式二:
                axios.get('url',{params:{
                    键值对
                }
                }).then(res=>res.data)
                .catch(err=>console.log(err))
                
                axios({
                    method:'get',
                    url:'x',
                    params:{
                        键值对
                    }
                }).then(res=>res.data)
        
        (3)post请求

            1、若被拦截,引入qs
                import qs from 'qs'  将post的参数转换成url?键值对的形式,否则会被拦截
                因为post中的键值对会以对象形式添加
        
            2、创建请求
               axios.post(url,data参数,{配置})
               axios.post('url',qs.stringify({
                    键值对
               }),{配置}).then(res=>{res.data}).catch(err=>console.log(err))
               或
               axios({
                       method:'post',
                       url:'x',
                       data:{...}或字符串格式
               })
    
        (4)当后台返回了状态码时
            axios.get('url').then(
                ()=>{},
                ({response})=>{response.data}  获取错误情况下数据
            )
    
        (5)并行请求
            方式一：
            axios.all([axios请求1,axios请求2]).then((res)=>{
                数组
                res[0]/...
            })
            方式二：
            axios.all([axios请求1,axios请求2]).then(
                axios.spread((res1,res2)=>{
                    ...
                })
            )
            方式三：
            function getUserAccount() {
              return axios.get('/user/12345');
            }
            
            function getUserPermissions() {...}
            
            Promise.all([getUserAccount(), getUserPermissions()])
              .then(function (results) {
                const acct = results[0];
                const perm = results[1];
              });
        
        (6)axios返回流式内容(前端axios无法使用,import引入的,后端axios才行)
            (1)node_modules中找到axios
            (2)将lib/adapters/http.js中的内容全选复制到lib/adapters/xhr.js
            
                axios({method:'get',url,responseType:'stream'}).then(res=>{
                  res.data.pipe(fs.createWriteStream('C:/Users/10853/Desktop/'+title+".epub"))
                })
                案例:通过流读取下载电子书
                axios({method:'get',url,responseType:'stream'}).then(res=>{
                  res.data.pipe(fs.createWriteStream('C:/Users/10853/Desktop/'+title+".epub"))
                  res.data.on('end',function(){
                    console.log('下载完毕');
                  })
                })
                

        (7)axios拦截器
            拦截器中的两个方法参数和Promise的.then的方法参数效果相同
            多个请求拦截器:后面的会先执行,因为两个方法参数是被unshift插入执行的集合中
            多个响应拦截器:前面的会先执行,因为两个方法参数是被push进入执行的集合中
            
            (1)添加请求拦截器
                axios.interceptors.request.use(function (config) {
                    在发送请求之前做些什么,config为axios的配置对象
                    config.headers.Authorization=token
                    
                    return config;
                  }, function (error) {    会接收请求拦截器中抛出的错误
                    对请求错误做些什么
                    return Promise.reject(error);
                  });
            
            (2)添加响应拦截器
                axios.interceptors.response.use(function (response) {
                    对响应数据做点什么,response为axios的返回结果对象
                    return response;
                  }, function (error) {
                    对响应错误做点什么
                    return Promise.reject(error);
                  });
                  
            (3)对某个实例添加拦截器
                const instance = axios.create();
                instance.interceptors.request.use(function () {/*...*/});
            
            (4)删除拦截器
                const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
                axios.interceptors.request.eject(myInterceptor);
              
        (8)取消请求
            方式一：
            const controller = new AbortController();

            axios.get('/foo/bar', {
               signal: controller.signal
            }).then(function(response) {
               //...
            });
            // 取消请求
            controller.abort()
            
            方式二：已废弃
            const CancelToken = axios.CancelToken;
            const source = CancelToken.source();
            
            axios.get('/rl', {
              cancelToken: source.token 方式一:
              cancelToken:new CancelToken((c)=>{
                      变量=c;
              })
            }).catch(err=>{
                  if (err.message == "interrupt") {
                       console.log('已中断请求');
                    return;
                  }
            })
            方式一中断请求:source.cancel('interrupt');
            方式二中断请求:变量('interrupt');
            
        (9)多个请求只发送一次,利用取消请求的特性
            将取消请求的函数赋值给一个变量,当数据返回时将变量修改为null,每次请求判断变量是否为null,不是则取消
            const CancelToken = axios.CancelToken;
            let cont=null;
            
            if(cont!==null){
                cont();
            }
            axios.get('/rl', {
              cancelToken: source.token 方式一:
              cancelToken:new CancelToken((c)=>{
                  cont=c;
              })
            }).then(()=>{
                cont=null;
            })