美文网首页让前端飞Java 核心技术
深入解析Axios 常用的请求方法别名

深入解析Axios 常用的请求方法别名

作者: a333661d6d6e | 来源:发表于2018-12-19 21:47 被阅读6次

    下面小编就为大家分享一篇Axios 常用的请求方法别名,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。

    Axios

    是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
    常用的请求方法别名一般有: Get/post/http协议请求

    执行Get请求

    function get(){
     return axios.get('/data.json', {
        params:{
         id:1234
        }
        }).then(function (response) {
         console.log(response);
        })
       .catch(function (error) {
        console.log(error);
       });//欢迎加入前端全栈开发交流圈一起学习交流:864305860
     }
    

    使用get方法进行传参数的时候用的是 params方法

    执行Post请求

    function post(){
    return axios.post('/data.json', {
      id:1234
        })//欢迎加入前端全栈开发交流圈一起学习交流:864305860
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });//欢迎加入前端全栈开发交流圈一起学习交流:864305860
     }
    

    使用post方法进行传参数的时候是直接进行数据的传递,这也是两种方法的区别。

    执行http协议请求

    unction http(){
     return axios({
     method: 'post',
     url: '/data.json',
     data: {
      id: 1111,
     },
    params: {
     id:2222,
     }).then(res=>{
      this.msg=res.data;
     });//欢迎加入前端全栈开发交流圈一起学习交流:864305860
    }
    

    注意这里的区别,当使用post请求的时候,进行数据的传参使用的是data方法,而使用get请求的时候,使用的是params方法。

    使用拦截器:

    在请求或响应被 then 或 catch 处理前拦截它们。

    // 添加请求拦截器
    mounted:function(){
      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);
       });//欢迎加入前端全栈开发交流圈一起学习交流:864305860
    }
    

    结语

    感谢您的观看,如有不足之处,欢迎批评指正。

    本次给大家推荐一个免费的学习群,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。
    对web开发技术感兴趣的同学,欢迎加入Q群:864305860,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。
    最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。

    相关文章

      网友评论

        本文标题:深入解析Axios 常用的请求方法别名

        本文链接:https://www.haomeiwen.com/subject/ixqckqtx.html