• Vue之axios基础使用


    axios 简介

    axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:

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

    安装

    npm安装

    $ npm install axios --save
    

    通过cdn引入

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    

    发送GET请求

    // created:vue生命周期中的钩子函数,在这个时间点,data中的数据已经注入到响应式系统中
    created(){
        axios.get('api/getData.php',{       // 还可以直接把参数拼接在url后边
            params:{
                title:'眼镜'
            }
        }).then(function(res){
            this.goodsList = res.data;
        }).catch(function (error) {
            console.log(error);
        });
    }
    
    response.data才是真正返回的后台数据

    发送POST请求

    axios.post('/user', {
        firstName: 'Fred',
        lastName: 'Flintstone'
    }).then(function (response) {
        console.log(response);
    }).catch(function (error) {
        console.log(error);
    });
    
    // 注意: 如果发送请求时,发现传递的参数是对象,那么可用如下方式传参数
    // var params = new URLSearchParams();
    // params.append('title', '眼镜');
    // params.append('id',1);
    // axios.post('/user', params)
    //      .then(function(res){})
    //      .catch(function(error){});
    
    response.data才是真正返回的后台数据

    执行多个并发请求

    //获得用户信息的请求
    function getUserAccount() {
         return axios.get('/user/12345');
    }
     
    //获取用户许可证的请求
    function getUserPermissions() {
         return axios.get('/user/12345/permissions');
    }
     
    axios.all( [ getUserAccount(),  getUserPermissions() ] )
        .then(axios.spread(function (acct, perms) {
            //两个请求现已完成
        })
    );
    

    请求拦截器和响应拦截器

    //请求拦截器
    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);
      }
    );
    

    Vue中axios在发送POST请求时,参数的处理

    1. 下载安装第三方模块 qs -> npm install qs --save-dev

    2. 处理方式

    // 第一种: 直接在发送的时候,对数据进行qs.stringify处理
    // 缺点: 如果项目大,有大量的请求需要发送,那么一个一个加会很麻烦
    axios.post("/checkLogin.php", qs.stringify({
      name, pwd
    }));
    
    // 第二种: 使用axios.create创建一个新的axios实例,统一对数据进行处理, 同时也要借助qs模块
    const Axios = axios.create({
      baseURL: '/api',
      transformRequest: [function (data) {
        const d = qs.stringify(data)
        return d;
      }]
    })
    
    Axios.post("/checkLogin.php", {
      name, pwd
    });
    




  • 相关阅读:
    sp2010 升级sp2013 用户无法打开网站
    powerviot install in sharepoint 2013
    can not connect cube in performancce dashboard
    westrac server security configure user info
    添加报表服务在多服务器场
    sharepoint 2013 office web app 2013 文档在线浏览 IE11 浏览器不兼容解决方法
    delete job definition
    目前付款申请单内网打开慢的问题
    item style edit in sharepoint 2013
    Could not load file or assembly '$SharePoint.Project.AssemblyFullName$'
  • 原文地址:https://www.cnblogs.com/sea520/p/11754496.html
走看看 - 开发者的网上家园