全局绑定属性、使用 Axios 和 fetchJsonp 请求真实 api 接口数据、函数防抖实现百度搜索

使用 Axios 请求远程真实 Api 接口数据

https://github.com/axios/axios

1. 安装

npm install axios --save

或者

yarn add axios

2. 引入使用

import Axios from "axios";

axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });

完整示例

getData(){
  var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
  Axios.get(api).then((response)=>{
  	this.list=response.data.result;
  }).catch((error)=>{
    console.log(error);
  })
}

全局绑定 Axios

在 vue3.x 中全局绑定属性请参考：https://v3.vuejs.org/api/application-config.html#warnhandler

import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios';

var app=createApp(App)
app.config.globalProperties.axios=axios
app.mount('#app')

使用 fetch-jsonp 请求 jsonp 接口

axios 不支持 jsonp 请求，如果我们要用 jsonp 来请求数据可以使用 fetch-jsonp 这个模块：https://github.com/camsong/fetch-jsonp

import fetchJsonp from 'fetch-jsonp';

getData() {
            fetchJsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=php', {
                    jsonpCallback: 'cb',
                })
                .then(function (response) {
                    return response.json()
                }).then(function (json) {
                    console.log(json)
                }).catch(function (ex) {
                    console.log('parsing failed', ex)
                })
}

使用函数防抖实现百度搜索

<template>
<div class="home">
    <button @click="getData()">获取数据</button>

    <input type="text" v-model="keyword" @keyup="getData" />
    <br>
    <ul>
        <li v-for="(item,index) in list" :key="index">{{item}}</li>
    </ul>
</div>
</template>

<script>
import fetchJsonp from 'fetch-jsonp';
export default {
    data() {
        return {
            keyword: "",
            list: [],
            timer: ""
        }
    },
    methods: {
        getData() {
            if (this.keyword != "") {
                clearTimeout(this.timer);
                this.timer = setTimeout(() => {
                    var api = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + this.keyword
                    fetchJsonp(api, {
                            jsonpCallback: 'cb',
                        })
                        .then(function (response) {
                            return response.json()
                        }).then((json) => {
                            this.list = json.s
                        })

                }, 200)

            }
        }
    },

}
</script>

<style lang="scss">
.home {
    padding: 20px;
}
</style>