欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

axios使用

程序员文章站 2022-07-02 21:20:42
...

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/[email protected]/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/[email protected]/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>