第十五讲、Vue3.x中全局绑定属性、使用Axios和fetchJsonp请求真实api接口数据、函数防抖实现百度搜索

一、Vue3.x中使用Axios请求远程真实Api接口数据

https://github.com/axios/axios

1、安装

npm install axios --save  
或者
yarn add axios
或者
cnpm install axios --save 

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);
  })
}

二、Vue3.x全局绑定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')

三、Vue3.x中使用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)
                })
}

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