vue的ajax是什么？

vue的ajax与我们的以前接触到的ajax作用是一致的，都是用来传递参数的，我们先来简单了解一下他在vue中的写法

通过代码来看

1. GET 的请求方式

  created() {
    let url = `https://api.github.com/search/repositories?q=${this.queryName}`;
	
	axios
      .get(url)
      .then(
        // 请求成功
        response => { // 可以写成res
          console.log(response.data.items);
        },
        // 接口出错 不是请求失败
        error => {
          console.log("接口出错了");
        }
      )
      // 请求失败
      .catch(error => {
        console.log("请求过程出错");
      });
	}
	axios({
		// 默认的发送方式，方式为get
	}) 

2. POST 的请求方式

 created() {
	axios
      .post("/user", {
        firstName: "san",
        lastName: "si"
      })
      .then(response => {
        console.log(response);
      })
      .catch(err => {
        console.log(err);
      });
  }

3. 执行多个并发请求

 created() {
	ction getUser() {
      return axios.get(url);
    }

    function postUser() {
      return axios.post(url, { a: 1 });
    }

    axios.all([getUser(), postUser()]);
}

下边我们通过vue的ajax来完成一个小案例
我们先准备一个基础模板

<template>
  <div id="app">
    <h3 >
      This is 数据<a href="reqUrl">{{reqName}}</a>
    </h3>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "App",
  data() {
    return {
      reqUrl: "",
      reqName: "",
      queryName: "GD"
    };
  },
  created() {
    let url = `https://api.github.com/search/repositories?q=${this.queryName}`;

    // GET 的请求方式
    axios
      .get(url)
      .then(
        response => { 
			let result = response.data;
			console.log(result)
        },
        error => {
          console.log("接口出错了");
        }
      )
      .catch(error => {
        console.log("请求过程出错");
      });
};
</script>

浏览器反馈


可以看出，items里就是我们要获取的数据

那我们的需求是，当他这个路径发起的时候让一下标签显示

<template>
  <div id="app">
    <h2 v-show="!reqUrl">loading...</h2> 

    <h3 v-show="reqUrl">
      This is<a href="reqUrl">{{reqName}}</a>
    </h3> 
  </div>
</template>

response => { 
	console.log(response.data);
	let result = response.data;
	
	let reArray = result.items[0];
	console.log(reArray);
	
	this.reqName = reArray.name;
	this.reqUrl = reArray.html_url;
 },

现在我们在通过vue的ajax完成一个小的搜索案例

我们先准备一个单页面组件

<template>
    <div>
        <input type="text" v-model="inputsearchName">
        <button @click="search">Search</button>
    </div>
</template>

<script>
export default {
    name:'search',
    data() {
        return {
            inputsearchName:""
        }
    },
    methods: {
        search(){
            // 去掉字符串中的首尾空格
            let iptval = this.inputsearchName.trim();
            if(!iptval){
                return;
            }

            this.setsearchName(iptval);
        }
    },
}
</script>

创建了一个按钮，点击之后会触发一个函数，然后去获取到这个ipnut框里输入的值，并做一个非空判断，但如果存在的话用他去搜索，然后置空input框

在创建一个组件，用来显示内容

<template>
    <div>
        <h2 v-show="firstView"> 输入名字搜索 </h2>
        <h2 v-show="loading"> loading... </h2>
        <h2 v-show="errorMsg"> {{errorMsg}} </h2>

        <div class="row" v-show="users">
            <div v-for="user of users" :key="user.id">
                <a href="">
                    <img :src="" alt="">
                </a>
                <p>  </p>
            </div>
        </div>
    </div>
</template>

<script>
import Axios from 'axios';
export default {
    name:'list',
    // 子接
    props:['searchName'],
    data() {
        return {
            firstView:true,
            loading:false,
            errorMsg:null,
            users:null
        }
    }
}
</script>

然后我们去根组件里引入以下两个单文件组件

<template>
  <div id="app">

    <h1> Search Github </h1>

    <search :setsearch-name="setsearchName"></search>
    <list :search-name="searchName"></list>
    
  </div>
</template>

<script>
import axios from "axios";
import search from "./components/search";
import list from "./components/list"

export default {
  name: "App",
  data() {
    return {
      searchName:""
    };
  },
  components:{
    search,
    list
  },
  methods: {
    setsearchName(iptval){
      this.searchName = iptval;
    }
  },
};
</script>

当组件被调用时会触发setsearchName，然后把他的value值传入searchName ，在传给list这个组件

props:['searchName'],

list接收数据，

现在我们已经有里接收数据的，然后我们去list做一个ajax传参

因为searchName是会改变的，所以我们把他写在watch里监听起来

    watch: {
        // 监听searchName做出相应改变
        searchName(){
            this.firstView = false;
            this.loading = true;

            let url = `https://api.github.com/search/repositories?q=${this.searchName}`;

            // 发送ajax请求
            Axios
                .get(url)
                .then(
                    res=>{
                        console.log(res);
                        this.loading = false;

                        let result = res.data;
                        this.users = result.items.map(item=>{
                            return{
                                html_url : item.html_url,
                                avatar_url : item.avatar_url,
                                login : item.login
                            }
                        })
                    },
                    error=>{
                        console.log('接口错误')
                    }
                    
                )
                .catch(err=>{
                    this.loading = false;
                    this.errorMsg = err;
                })
        }
    },