axios使用

最新推荐文章于 2024-08-19 14:17:41 发布

林飞的梦呓

最新推荐文章于 2024-08-19 14:17:41 发布

阅读量525

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_25479327/article/details/80339110

版权

Vue 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

axios demo示例（一）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!--<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>-->
<!--<script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->

<script src="vue.js"></script>
<script src="axios.min.js"></script>
</head>
<body>
<div id="app" class="container">
  <h1>axios插件讲解</h1>
  <a href="javascript:;" class="btn btn-primary" @click="get">Get请求</a>
  <a href="javascript:;" class="btn btn-primary" @click="post">Post请求</a>
  <a href="javascript:;" class="btn btn-primary" @click="http">http请求</a>
  <div>
    <span>{{ msg }}</span>
  </div>
</div>
<script>
  new Vue({
    el: "#app",
    data: {
      msg: ""
    },
    mounted () {

    },


    methods: {
      // 不传参
      // get () {
      //   axios.get("package.json").then( res => {
      //     this.msg = res.data;
      //   })
      // },

      // 传参
      get () {
        axios.get("package.json", {
          params: {
            userId: "999"
          },
          headers: {
            token: "jack"
          }
        }).then( res => {
          this.msg = res.data;
        }).catch( error => {
          console.log("error init." + error)
        });
      },


      post () {
        axios.post("package.json", {
          userId: "888"
        }, {
          headers: {
            token: "tom"
          }
        }).then( res => {
          this.msg = res.data;
        }).catch( error => {
          console.log("error init." + error);
        })
      },

/* post请求要在data中定义，get请求要在params中定义
post请求发送的是request body，
get请求是通过params传递数据
        http () {
        axios({
          url: "package.json",
          method: "post",
          data: {
            userId: "101"
          },
          headers: {
            token: "http-test"
          }
        }).then( res => {
          this.msg = res.data;
        })
      },*/

      http () {
        axios({
          url: "package.json",
          method: "get",
          params: {
            userId: "102"
          },
          headers: {
            token: "http-test"
          }
        }).then( res => {
          this.msg = res.data;
      })
      }
    }
  })
</script>
</body>
</html>

请求、响应拦截
axios demo示例（二）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!--<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>-->
<!--<script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->

<script src="vue.js"></script>
<script src="axios.min.js"></script>
</head>
<body>
<div id="app" class="container">
  <h1>axios插件讲解</h1>
  <a href="javascript:;" class="btn btn-primary" @click="get">Get请求</a>
  <a href="javascript:;" class="btn btn-primary" @click="post">Post请求</a>
  <a href="javascript:;" class="btn btn-primary" @click="http">http请求</a>
  <div>
    <span>{{ msg }}</span>
  </div>
</div>
<script>
  new Vue({
    el: "#app",
    data: {
      msg: ""
    },






    mounted () {
      // 全局的拦截——request请求
      axios.interceptors.request.use( (config) => {
        console.log("request init.");
        // 相关业务代码...
        return config;
      });

      // 全局的拦截——response请求
      axios.interceptors.response.use( (response) => {
        console.log("response init.");
      return response;
    });
    },
















    methods: {
      // 不传参
      // get () {
      //   axios.get("package.json").then( res => {
      //     this.msg = res.data;
      //   })
      // },

      // 传参
      get () {
        axios.get("package.json", {
          params: {
            userId: "999"
          },
          headers: {
            token: "jack"
          }
        }).then( res => {
          this.msg = res.data;
        }).catch( error => {
          console.log("error init." + error)
        });
      },


      post () {
        axios.post("package.json", {
          userId: "888"
        }, {
          headers: {
            token: "tom"
          }
        }).then( res => {
          this.msg = res.data;
        }).catch( error => {
          console.log("error init." + error);
        })
      },

/*      http () {
        axios({
          url: "package.json",
          method: "post",
          data: {
            userId: "101"
          },
          headers: {
            token: "http-test"
          }
        }).then( res => {
          this.msg = res.data;
        })
      },*/

      http () {
        axios({
          url: "package.json",
          method: "get",
          params: {
            userId: "102"
          },
          headers: {
            token: "http-test"
          }
        }).then( res => {
          this.msg = res.data;
      })
      }
    }
  })
</script>
</body>
</html>