Vue学习之路:交互-axios用法 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue交互-axios用法</title>

    </head>

    <body>
        <div id="app">
         <!-- 官网:https://github.com/axios/axios -->
         <!-- 
         特征:
         支持:浏览器端
         支持:promise
         能拦截请求和响应
         自动转换JSON数据 -->
        </div>
        
        
    </body>

    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/jscript" src="axios/axios.js"></script>
    <script type="text/javascript">    
        /*4种方式
        axios.get:获取
        axios.post:提交
        axios.delete:删除（接口传参方式和get一样）
        axios.put:修改（接口传参方式和post一样）
        
        响应结果：
        data:实际响应回来的数据
        headers:响应头信息
        status:响应状态码
        statusText:响应状态信息
        
        axios全局配置
        axios.defaults.timeout=3000;//超时时间
        axios.defaults.baseURL=''默认地址
        axios.defaults.headers['token']=''0230654s6df1sdf54s6f//设置请求头
        */
       //配置请求的基础URL地址
      axios.defaults.baseURL='http://text.token4.com/api/'
      //axios.defaults.headers['token']='0230654s6df1sdf54s6f'
      
      //拦截器
      //请求拦截器
      axios.interceptors.request.use(function(config){
          console.log(config);
          config.headers.mytoken='tokensdf3sd54f6s1df'
          //console.Content-Type='application/x-www-form-urlencoded;charset=utf-8'
          return config;
      },function(err){
          console.log(err)
      })
      
      //响应拦截器
      axios.interceptors.response.use(function(config){
                console.log(config);
                return config;
      },function(err){
                console.log(err)
      })
      
      

        /*URL传参方式*/
        /* axios.get('Token/GetToken?cust_id=10000').then(function(data){
            console.log(data)
        }) */
        /*对象传参*/
        /* axios.get('Token/GetToken',{params:{cust_id:10000}}).then(function(data){
            console.log(data)
        }) */
        /*post传递参数方法1*/
        /*这里传过去是一个json字符串.需要在后台进行解析。进行接收json数据格式*/
        var data={cust_id:10000};
        
        axios.post(
        'Token/GetToken'
        ,JSON.stringify(params)).then(function(data){
            console.log(data)
        })
        
        /*post传递参数方法2*/
        var params=new URLSearchParams();
        params.append('cust_id','10000');
        
        
        axios.post(
        'Token/GetToken',
        params)
        .then(function(data){
            console.log(data)
        })
    </script>
</html>

 

posted @ 2021-07-07 09:54  王彬-效率开发  阅读(77)  评论(0)    收藏  举报