Vue使用axios请求

新建组件（局部引入）：

<template>
  <div>
    <p>{{ msg }}</p>
  </div>
  
</template>

<script>
import axios from 'axios';
import QueryString from 'qs';

export default {
  name: 'HelloWorld',
  data(){
    return{
      msg:"111",
    }
  },
  mounted(){
        //Fetch API 基本用法
    // fetch('http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php').then(function(data){
    //   // text()方法属于fetchAPI的一部分，它返回一个Promise实例对象，用于获取后台返回的数据
    //   return data.json();
    // }).then(function(data){
    //   console.log(data.chengpinDetails[0].title);
    // })
    // get
    // axios({
    //   method:"get",
    //   url:"http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php",
    // }).then(res=>{
    //   this.msg=res.data.chengpinDetails[0].title
    // })
    // post
    // axios({
    //   method:"post",
    //   url:"http://iwenwiki.com/api/blueberrypai/login.php",
    //   data: QueryString.stringify({
    //     user_id: "iwen@qq.com",
    //     password: "iwen123",
    //     verification_code: "crfvw"
    //   })
    // }).then(res=>{
    //   this.msg=res.data
    // })

    // axios.get('http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php').then(res=>{
    //   this.msg=res.data.chengpinDetails[0].title
    // })
    axios.post('http://iwenwiki.com/api/blueberrypai/login.php',QueryString.stringify({
      user_id: "iwen@qq.com",
      password: "iwen123",
      verification_code: "crfvw"
    })).then(res=>{
      this.msg=res.data.success
    })
  }  
}
</script>

<style scoped>

</style>

查看请求效果：

 

成功请求。

 

 

全局引入步骤：

首先在main.js中引入：

 

 然后进行挂载：

 

 使用的时候需要变化一下：

 

 查看效果：

 

 请求成功。