Vue 异步请求

vue最初使用vue-resource来实现异步请求(ajax),vue 2.0开始推荐使用 axios 来代替vue-resource。 准备工作 1、使用npm下载axios npm install axios 2、引入axios.js...

vue最初使用vue-resource来实现异步请求(ajax),vue 2.0开始推荐使用 axios 来代替vue-resource。

准备工作

1、使用npm下载axios

npm install axios

2、引入axios.js

<script src="js/axios.js"></script>

上线时换为min.js

前端   vue使用axios发起异步请求

可以这样写:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- 引入vue.js -->
        <script src="js/vue.js"></script>
        <!-- 引入axios.js -->
        <script src="js/axios.js"></script>
    </head>
    <body>
        
    <div id="app"></div>

    <script>
        
        new Vue({
            el:'#app',
            template:`
                <div>
                    <button @click="login">发送</button>
                </div>
            `,
            data(){
                return{
                    
                }
            },
            methods:{

                  login:function() {
                      axios.post('/login', {  //get|post可选,用对象{ }传递数据,如果不传递数据,可缺省{ }。get方式参数也可以拼接在url中
                          username: 'chy',   //通常是获取表单数据,$('#xxx').val
                          password: 'abcd'
                      }).then(function (response) {  //处理后台返回的数据。
                          console.log(response);  //response是后台返回的整个响应
                          console.log(response.data);  //.data才是后台返回的数据
                      }).catch(function (error) {  //发生错误时的处理
                          console.log(error);
                      });
                  }

            }

        })
    
    </script>        
        
    </body>
</html>
 

如果不需要后台返回数据,可以不要then。catch也不是必需的。

也可以这样写:

    methods:{

          login:function() {
              axios({
                  method:'post',  //请求方式
                  url:'/login',  //后台接口
                  data:{  //传给后台的数据
                      username: 'chy',
                      password: 'abcde'
                  }
              }).then(function (response) {
                  console.log(response);  //response是后台返回的整个响应
                  console.log(response.data);  //.data才是后台返回的数据
              }).catch(function (error) {  //发生错误时的处理
                  console.log(error);
              });
          }

    }

这种是不跨域的,如果跨域,url要写  host|ip:port/xxx,写全。

发起异步请求时可以用resultType指定期待返回的数据类型(text、json、stream),可以但是没必要,会自动识别返回的数据类型。

后台   处理ajax请求

@Controller
// @ResponseBody  //@ResponseBody可以写在类上、方法上,写在类上时,对类中所有方法都生效
// @RestController  //@RestController相当于@Controller+@ResponseBody
public class UserController {

    @RequestMapping("/login")
    @ResponseBody  //如果要返回数据给前端,需要用@ResponseBody修饰方法,以json形式返回,不然会被当做视图名
    public String login(@RequestBody Map<String,String> map) {  //如果要接收ajax传来的参数,需要用一个、且只能用一个Map来接收参数,并且要用@RequestBody标注
        String username = map.get("username");  //获取ajax传递的参数
        String password = map.get("password");
        System.out.println(username);
        System.out.println(password);

        return "ok";  //返回给前端的数据。如果不返回数据,返回值类型设置为void即可

    }

}

上面的demo不涉及跨域请求,如果请求要跨域,前端、后台都要做一些其它设置。

 

后台  返回数据示例

@RestController  //相当于@Controller+@ResponseBody
public class UserController {

    //返回文本|字符串
    @RequestMapping("/login1")
    public String login1() {
        return "hello";
    }

    //返回对象
    @RequestMapping("/login2")
    public User login2() {
        User user = new User("chy", "abcd");
        return user;
    }

    //返回Map。Map和pojo类都是一回事,都是作为json对象返回
    @RequestMapping("/login3")
    public Map<String,Object> login3() {
        HashMap<String, Object> map = new HashMap<>();
        map.put("username", "chy");
        map.put("age", 20);
        return map;
    }

    //返回List,以json数组的形式返回
    @RequestMapping("/login4")
    public List login4() {
        User user1 = new User("chy1", "abcd");
        User user2 = new User("chy2", "abcd");
        User user3 = new User("chy3", "abcd");
        ArrayList<User> userList = new ArrayList<>();
        userList.add(user1);
        userList.add(user2);
        userList.add(user3);
        return userList;
    }

}

前端   取出数据示例

.then(function (response) {
      console.log(response.data);  //取出返回的数据,字符串|对象|Map|List
      // console.log(response.data.username);  //取出对象|Map的某个字段的值
      // console.log(response.data[0]);  //取出List中的某个元素
      // console.log(response.data[0].username);  //取出List中的某个元素的某个字段的值
  })

 

说明

如果调试时,Chrome控制台报错:  net::ERR_SOCKET_NOT_CONNECTED   ,多刷新几次,或者清除缓存即可。

  • 发表于 2020-04-10 22:06
  • 阅读 ( 137 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除