vue axios浣跨敤

Posted 2020-11-28

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue axios浣跨敤相关的知识，希望对你有一定的参考价值。

鏍囩锛?a href='http://www.mamicode.com/so/1/%e8%af%b7%e6%b1%82%e5%a4%b4' title='璇锋眰澶?>璇锋眰澶?/a> baseurl zhang 鍏ㄥ眬閰嶇疆鍝嶅簲 mic tle 鍑芥暟 base

鎶€鏈浘鐗? src=

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
  <script type="text/javascript" src="js/axios.js"></script>
  <script type="text/javascript">
    axios.get('http://localhost:3000/adata').then(function(ret){
      // 娉ㄦ剰data灞炴€ф槸鍥哄畾鐨勭敤娉曪紝鐢ㄤ簬鑾峰彇鍚庡彴鐨勫疄闄呮暟鎹?      // console.log(ret.data)
      console.log(ret)
    })
  </script>
</body>
</html>

鎶€鏈浘鐗? src=

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
  <script type="text/javascript" src="js/axios.js"></script>
  <script type="text/javascript">
    /*
      axios璇锋眰鍙傛暟浼犻€?    */
    // axios get璇锋眰浼犲弬
    // axios.get('http://localhost:3000/axios?id=123').then(function(ret){
    //   console.log(ret.data)
    // })
    // axios.get('http://localhost:3000/axios/123').then(function(ret){
    //   console.log(ret.data)
    // })
    // axios.get('http://localhost:3000/axios', {
    //   params: {
    //     id: 789
    //   }
    // }).then(function(ret){
    //   console.log(ret.data)
    // })

    // axios delete 璇锋眰浼犲弬
    // axios.delete('http://localhost:3000/axios', {
    //   params: {
    //     id: 111
    //   }
    // }).then(function(ret){
    //   console.log(ret.data)
    // })

    // axios.post('http://localhost:3000/axios', {
    //   uname: 'lisi',
    //   pwd: 123
    // }).then(function(ret){
    //   console.log(ret.data)
    // })
    // var params = new URLSearchParams();
    // params.append('uname', 'zhangsan');
    // params.append('pwd', '111');
    // axios.post('http://localhost:3000/axios', params).then(function(ret){
    //   console.log(ret.data)
    // })

    // axios put 璇锋眰浼犲弬
    axios.put('http://localhost:3000/axios/123', {
      uname: 'lisi',
      pwd: 123
    }).then(function(ret){
      console.log(ret.data)
    })

    

  </script>
</body>
</html>

鎶€鏈浘鐗? src=

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
  <script type="text/javascript" src="js/axios.js"></script>
  <script type="text/javascript">
    /*
      axios 鍝嶅簲缁撴灉涓庡叏灞€閰嶇疆
    */
    // axios.get('http://localhost:3000/axios-json').then(function(ret){
    //   console.log(ret.data.uname)
    // })

    // 閰嶇疆璇锋眰鐨勫熀鍑哢RL鍦板潃
    axios.defaults.baseURL = 'http://localhost:3000/';
    // 閰嶇疆璇锋眰澶翠俊鎭?    axios.defaults.headers['mytoken'] = 'hello';
    axios.get('axios-json').then(function(ret){
      console.log(ret.data.uname)
    })


  </script>
</body>
</html>

鎶€鏈浘鐗? src=

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
  <script type="text/javascript" src="js/axios.js"></script>
  <script type="text/javascript">
    /*
      axios鎷︽埅鍣?    */
    axios.interceptors.request.use(function(config) {
      console.log(config.url)
      config.headers.mytoken = 'nihao';
      return config;
    }, function(err){
      console.log(err)
    })

    axios.interceptors.response.use(function(res) {
      // console.log(res)
      var data = res.data;
      return data;
    }, function(err){
      console.log(err)
    })
    axios.get('http://localhost:3000/adata').then(function(data){
      console.log(data)
    })
  </script>
</body>
</html>

鎶€鏈浘鐗? src=

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
  <script type="text/javascript" src="js/axios.js"></script>
  <script type="text/javascript">
    /*
      async/await 澶勭悊寮傛鎿嶄綔锛?      async鍑芥暟杩斿洖涓€涓狿romise瀹炰緥瀵硅薄
      await鍚庨潰鍙互鐩存帴璺熶竴涓?Promise瀹炰緥瀵硅薄
    */
    axios.defaults.baseURL = 'http:localhost:3000';
    // axios.get('adata').then(function(ret){
    //   console.log(ret.data)
    // })

    // async function queryData() {
    //   var ret = await axios.get('adata');
    //   // console.log(ret.data)
    //   return ret.data;
    // }

    async function queryData() {
      var ret = await new Promise(function(resolve, reject){
        setTimeout(function(){
          resolve('nihao')
        },1000);
      })
      // console.log(ret.data)
      return ret;
    }
    queryData().then(function(data){
      console.log(data)
    })
  </script>
</body>
</html>

鎶€鏈浘鐗? src=

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
  <script type="text/javascript" src="js/axios.js"></script>
  <script type="text/javascript">
    /*
      async/await澶勭悊澶氫釜寮傛浠诲姟
    */
    axios.defaults.baseURL = 'http://localhost:3000';

    async function queryData() {
      var info = await axios.get('async1');
      var ret = await axios.get('async2?info=' + info.data);
      return ret.data;
    }

    queryData().then(function(data){
      console.log(data)
    })
  </script>
</body>
</html>

以上是关于vue axios浣跨敤的主要内容，如果未能解决你的问题，请参考以下文章

Vue寮€鍙戜腑鐨勪腑澶簨浠舵€荤嚎鍒涘缓浠ュ強浣跨敤

濡備綍浣跨敤eclipse浣跨敤Maven

MySQL涔嬪垵浣跨敤

濡備綍鎻愰珮绋嬪簭鍛樼殑閿洏浣跨敤鐜囷紵

window10Cmd浣跨敤

SpringCloudConfig浣跨敤