Axios笔记

Axios请求

1. 含义

   • 基于promise网络请求库，作用于node.js 和浏览器
   • 在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests

2. GET请求

   • 写法一

     axios.get('/user?ID=12345')
       .then(function (response) {
         // 处理成功情况
         console.log(response);
       })
       .catch(function (error) {
         // 处理错误情况
         console.log(error);
       })
       .finally(function () {
         // 总是会执行
       });
     

   • 写法二

     axios.get('/user', {
         params: {
           ID: 12345
         }
       })
       .then(function (response) {
         console.log(response);
       })
       .catch(function (error) {
         console.log(error);
       })
       .finally(function () {
         // 总是会执行
       });  
     

   • 写法三（async/await写法，IE和旧浏览器不支持）

     async function getUser() {
       try {
         const response = await axios.get('/user?ID=12345');
         console.log(response);
       } catch (error) {
         console.error(error);
       }
     }
     

3. POST请求

   • 例子

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

   • 并发请求

     function getUserAccount() {
       return axios.get('/user/12345');
     }
     
     function getUserPermissions() {
       return axios.get('/user/12345/permissions');
     }
     
     const [acct, perm] = await Promise.all([getUserAccount(), getUserPermissions()]);
     

4. axios API

   • axios(config)

     • GET请求

       axios({
         method: 'get',
         url: 'http://bit.ly/2mTM3nY',
         responseType: 'stream'
       })
         .then(function (response) {
           response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
         });
       

     • POST请求

       axios({
         method: 'get',
         url: 'http://bit.ly/2mTM3nY',
         responseType: 'stream'
       })
         .then(function (response) {
           response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
         });
       

   • axios(url,[config])

     // 默认发送一个GET请求
     axios('/user/12345');
     

5. axios新建实例

   const instance = axios.create({
     baseURL: 'https://some-domain.com/api/',
     timeout: 1000,
     headers: {'X-Custom-Header': 'foobar'}
   });
   

6. 请求配置

   • url

     • 请求的服务器url（必需）

   • method

     • 请求时使用的方法

   • baseURL

     • 自动加在 url 前面，除非 url 是一个绝对 URL

   • transformRequest

     • 可以在向服务器发送前修改数据，只能用于PUT、POST、PATCH，返回一个字符串、Buffer实例、ArrayBuffer、FormData、Stream

      transformRequest: [function (data, headers) {
         // 对发送的 data 进行任意转换处理
     
         return data;
       }],
     

   • transformResponse

     • 在传递给then/catch前修改响应数据

     transformResponse: [function (data) {
         // 对接收的 data 进行任意转换处理
     
         return data;
       }],
     

   • headers:{‘xx’:'xxx'}

     • 自定义请求头

   • params:{xx:xx}

     • 与请求一起发送的URL参数，必须是简单对象/URLSearchParams参数

   • paramsSerializer

     • 用于序列化params

     paramsSerializer: function (params) {
         return Qs.stringify(params, {arrayFormat: 'brackets'})
       },
     

   • data:{xx:xx}

     • 作为请求体被发送的数据

   • data: 'Country=Brasil&City=Belo Horizonte'

     • 发送请求体数据的可选语法
     • 请求方式 post
     • 只有 value 会被发送，key 则不会

   • timeout

     • 指定请求超时的毫秒数

   • withCredentials:false(默认)

     • 跨域请求时是否需要使用凭证

   • adapter

     • 自定义处理请求

     • 返回一个 promise 并提供一个有效的响应

       adapter: function (config) {
           /* ... */
         },
       

   • auth

     • HTTP Basic Auth

        auth: {
           username: 'janedoe',
           password: 's00pers3cret'
         },
       

   • responseType:'json'(默认)

     • 浏览器将要响应的数据类型
     • 选项包括: 'arraybuffer', 'document', 'json', 'text', 'stream'
     • 浏览器专属：'blob'

   • responseEncoding: 'utf8'(默认)

     • 表示用于解码响应的编码

   • xsrfCookieName: 'XSRF-TOKEN'(默认值)

   • xsrf token 的值，被用作 cookie 的名称

   • xsrfHeaderName: 'X-XSRF-TOKEN'(默认值)

     • 带有 xsrf token 值的http 请求头名称

   • onUploadProgress

     • 允许为上传处理进度事件

     • 浏览器专属

        onUploadProgress: function (progressEvent) {
           // 处理原生进度事件
         },
       

   • onDownloadProgress

     • 允许为下载处理进度事件

     • 浏览器专属

        onDownloadProgress: function (progressEvent) {
           // 处理原生进度事件
         },
       
       

   • maxContentLength

     • node.js中允许的HTTP响应内容的最大字节数

   • maxBodyLength

     • （仅Node）定义允许的http请求内容的最大字节数

   • validateStatus

     • 定义了对于给定的 HTTP状态码是 resolve 还是 reject promise。

     • 如果 validateStatus 返回 true (或者设置为 null 或 undefined)，则promise 将会 resolved，否则是 rejected。

         validateStatus: function (status) {
           return status >= 200 && status < 300; // 默认值
         },
       

   • maxRedirects:5(默认)

     • 定义了在node.js中要遵循的最大重定向数。
     • 如果设置为0，则不会进行重定向

   • socketPath:null(默认)

     • 定义了在node.js中使用的UNIX套接字。e.g. '/var/run/docker.sock' 发送请求到 docker 守护进程。
     • 只能指定 socketPath 或 proxy 。若都指定，这使用 socketPath 。

   • httpAgent和httpsAgent

     • 分别定义了在 node.js 中执行 http 和 https 请求时要使用的自定义代理。这允许添加诸如 keepAlive 之类的默认未启用的选项。

       httpAgent: new http.Agent({ keepAlive: true }),
         httpsAgent: new https.Agent({ keepAlive: true }),
       

   • proxy

     • 定义了代理服务器的主机名，端口和协议

        proxy: {
           protocol: 'https',
           host: '127.0.0.1',
           port: 9000,
           auth: {
             username: 'mikeymike',
             password: 'rapunz3l'
           }
         },
       

   • decompress:true(默认)

     • 表示响应体是否应自动解压缩
     • 如果设置为 true ，还将从所有解压缩响应的响应对象中删除 'content-encoding' 标头
     • 仅适用于节点（XHR 无法关闭解压缩）

7. 拦截器：在请求或响应被 then 或 catch 处理前拦截它们

   • 请求拦截器

     axios.interceptors.request.use(function (config) {
         // 在发送请求之前做些什么
         return config;
       }, function (error) {
         // 对请求错误做些什么
         return Promise.reject(error);
       });
     

   • 响应拦截器

     axios.interceptors.response.use(function (response) {
         // 2xx 范围内的状态码都会触发该函数。
         // 对响应数据做点什么
         return response;
       }, function (error) {
         // 超出 2xx 范围的状态码都会触发该函数。
         // 对响应错误做点什么
         return Promise.reject(error);
       });
     

   • 移除拦截器

     const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
     axios.interceptors.request.eject(myInterceptor);
     

8. 错误处理

   • 使用配置选项validateStatus

     axios.get('/user/12345', {
       validateStatus: function (status) {
         return status < 500; // 处理状态码小于500的情况
       }
     })
     

   • 使用toJSON

     axios.get('/user/12345')
       .catch(function (error) {
         console.log(error.toJSON());
       });
     

9. 取消请求

   • AbortController （中止控制器）

     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('/user/12345', {
       cancelToken: source.token
     }).catch(function (thrown) {
       if (axios.isCancel(thrown)) {
         console.log('Request canceled', thrown.message);
       } else {
         // 处理错误
       }
     });
     
     axios.post('/user/12345', {
       name: 'new name'
     }, {
       cancelToken: source.token
     })
     
     // 取消请求（message 参数是可选的）
     source.cancel('Operation canceled by the user.');
     
     // OR
     
     const CancelToken = axios.CancelToken;
     let cancel;
     
     axios.get('/user/12345', {
       cancelToken: new CancelToken(function executor(c) {
         // executor 函数接收一个 cancel 函数作为参数
         cancel = c;
       })
     });
     
     // 取消请求
     cancel();
     

10. 应用

    • 结合element中loading和message组件

       let loadinginstace
       axios.interceptors.request.use(config => {
         // 开启loading
         loadinginstace = Loading.service({ fullscreen: true })
         return config
       }, error => {
         loadinginstace.close()
         Message.error({
           message: '加载超时'
         })
         return Promise.reject(error)
       })
       // 响应拦截器
       axios.interceptors.response.use(data => {
         // 响应成功关闭loading
         loadinginstace.close()
         return data
       }, error => {
         loadinginstace.close()
         Message.error({
           message: '加载失败'
         })
         return Promise.reject(error)
       })
      

    • 登录权限控制

      const router = new Router({
         routes: [
           {
             path: '/background',
             name: 'background', 
              // 需要登录才能进入的页面可以增加一个meta属性
             meta: { 
               requireAuth: true
             },
             // 按需加载
             component: (resolve) => {
               require(['../components/background'], resolve)
             }
           }
         ]
       })
       //  判断是否需要登录权限 以及是否登录
       router.beforeEach((to, from, next) => {
       if (to.matched.some(res => res.meta.requireAuth)) {// 判断是否需要登录权限
           if (localStorage.getItem('username')) {// 判断是否登录
             next()
           } else {// 没登录则跳转到登录界面
             next({
               path: '/Register',
               query: {redirect: to.fullPath}
             })
           }
         } else {
           next()
         }
       })