Vue之请求数据(axios)

最新推荐文章于 2024-09-26 16:10:57 发布

就叫铭铭之中吧

最新推荐文章于 2024-09-26 16:10:57 发布

阅读量1.8k

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/mahuatengbukui/article/details/118971267

版权

本文介绍了Axios，一个基于Promise的HTTP库，适用于浏览器和Node.js。在Vue.js 2.0中，Axios被推荐用于处理AJAX请求。文中详细展示了如何使用Axios进行GET和POST请求，包括传递参数。对于GET请求，参数直接附加到URL；对于POST请求，分别演示了以form格式和JSON格式传递参数。

摘要由CSDN通过智能技术生成

一.什么是axios

Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。

Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。

二.引入

引入时不必纠结与vue的先后顺序，它并不依赖与vue

三.使用方法

1.get请求

get中就只有一个参数，这个参数中包括前面的地址，后面传的参数用“？”拼接在地址后

        created() {
          axios
            .get(
              "http://wkt.myhope365.com/weChat/applet/course/banner/list?number=4"
            )
            .then((res) => {
                console.log(res);
              this.imgList = res.data.data;
            });
        },

2.post请求(form格式)

要先定义一个form把想要传的参数放进去

有两个参数：请求地址，form

         created() {

          let from = new FormData();
          from.append("type", "boutique");
          from.append("pageNum", 2);
          from.append("pageSize", 10);
          axios
            .post("http://wkt.myhope365.com/weChat/applet/course/list/type", from)
            .then((res) => {
              console.log(res);
              this.courseList = res.data.rows;
            //   console.log(this.courseList);
            });
        },

3.post请求(JOSN格式)

这种情况下，有两个参数：请求地址，{传的参数}

但传的参数要以JOSN的格式

created() {
          
          axios
            .post("http://wkt.myhope365.com/weChat/applet/subject/list", {
              enable: 1,
            })
            .then((res) => {
              console.log(res);
              this.list = res.data.rows;
              console.log(this.list);
            });
        },