zoukankan      html  css  js  c++  java
  • vue axios 基础用法

    1.安装

    2.使用

    1.安装

    npm install axios --save

    npm install qs.js --save

    import axios from 'axios'

    import qs from 'qs'

    Vue.prototype.$axios = axios //全局注册,使用方法为:this.$axios

    Vue.prototype.qs = qs

    创建一个实例
    你可以创建一个拥有通用配置的axios实例
    
    axios.creat([config])
    var instance = axios.create({
      baseURL: 'https://some-domain.com/api/',
      timeout: 1000,
      headers: {'X-Custom-Header': 'foobar'}
    });
    //请求拦截器
    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);
      }
    );

    2.使用

    <script>
        export default{
            data(){
                return{
                    userId:1,
              token:'xxxxxx',
                }
            },
            created(){
                this.$axios({
                    method:'post',
                    url:'api',
                    data:this.qs.stringify({    //这里是发送给后台的数据
                          userId:this.userId,
                          token:this.token,
                    })
                }).then((response) =>{          //这里使用了ES6的语法
                    console.log(response)       //请求成功返回的数据
                }).catch((error) =>
                    console.log(error)       //请求失败返回的数据
                })
            }
        }
    </script>
  • 相关阅读:
    商城项目开发(一)
    java基础
    SpringBoot笔记
    设计模式-创建型模式
    讲真的 曾惜
    Linux常用精简命令实训练习
    使用ZeroClipboard.js复制内容到剪贴板上
    浅谈Jquery中的bind(),live(),delegate(),on()绑定事件方式
    jQuery mouseover与mouseenter,mouseout与mouseleave的区别
    div中的img垂直居中
  • 原文地址:https://www.cnblogs.com/ligenyun/p/12595422.html
Copyright © 2011-2022 走看看