Vue axios，fetchjsonp数据请求

1 axios数据的请求

<template>
  <div id="axiosinfo"></div>
</template>
<script>
//在组件里面使用可以直接引入
import Axios from "axios";
export default {
  name: "axiosinfo",
  mounted() {
    //async函数的异步
    async function getaxios() {
      let user = await Axios.get("/getuser");
      return user;
    }
    getaxios()
      .then(res => {
        console.log(res.data.result);
      })
      .catch(err => {
        console.log(err);
      })
      .finally(() => {
        console.log("最终执行");
      });
    //在main.js里面配置好axios 全局引入
    /*this.$axios.get("/getuser").then((res)=>{
            console.log(res.data.result)
        }).catch((err)=>{
            console.log(err);
        });*/
  }
};
</script>

2 fetchjsonp数据的请求

<template>
  <div id="fetchinfo">
    <p>fetchinfo</p>
  </div>
</template>
<script>
//在当前组件里面使用fetchjspon直接引入
import FetchJspon from "fetch-jsonp";
export default {
  name: "fetchinfo",
  data() {
    return {};
  },
  mounted() {
    //fetchjspon的使用 远程接口 jspon跨域
    let src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=1";
    FetchJspon(src, {
      jsonpCallback: "cb", //指定回调函数的参数
      jsonpCallbackFunction: "getData", //回调函数的名称
      timeout: 2000 //请求超时
    })
      .then(res => {
        return res.json();
      })
      .then(res => {
        //success
        console.log(res);
      })
      .catch(err => {
        console.log(err);
      });

    //全局引入
    //this.$fetch("")
    //常用的请求数据的插件 axios fetch-jspon插件
  }
};
</script>

3: 全局的引入，在main.js之中引入

//引入mock数据
require("./Mock/mock");

//如果axios在main.js里面配置
//将axios绑定到vue的原型对象上面 所有的组件都可以直接使用 this.$axios
import Axios from 'axios';
Vue.prototype.$axios=Axios;

//将fetchjsonp 全局组件使用
import fetch from 'fetch-jsonp'
Vue.prototype.$fetch=fetch;