vue---Axios网络请求

在vue当中使用比较方便的网络请求，Axios是一个基于promise的网络请求库，Axios的应用是需要单独安装的。 

1、在终端输入cnpm install --save axios，库比较小，安装比较快。

2、启动项目：npm run serve

3、引入才能使用，有两种方式，一种是组件中引用(get/post)，一种是全局引用。

①组件中引入：import axios from "axios"，每一个组件使用网络请求都需要引入一次。

②全局引用就是所有的组件只要引入一次就可以。

组件中引用，get请求方式：

1、打开HelloWorld.vue文件，输入：

<template>
    <div class="hello"></div>
</template>

<script>
    import axios from "axios"//第一步引入组件
    export default{
        name:"HelloWorld",
        //mounted组件渲染完成了，所以可以把网络请求放在这个生命周期函数当中
        mounted(){
            axios({
                method:"get",
                url:"http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php"
            )}.then(res =>{  //因为是基于promise的所以用.then的形式读取数据
                console.log(res.data);//res里面包含一个字段data，data是最终要拿到的数据
              })
        }
    }
</script>

打开localhost:8080可以看到控制台已经显示出来了数据。

2、让数据显示在页面上： 

<template>
    <div class="hello">
        <p>{{chengpin.title}}</p>
    </div>
</template>

<script>
    import axios from "axios"
    export default{
        name:"HelloWorld",
        data(){
            return{
                chengpin:{}//添加一个chengpin的对象
            }
        },
        mounted(){
            axios({
                method:"get",
                url:"http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php"
            )}.then(res =>{  
                console.log(res.data);
                this.chengpin=res.data.chengpinDetails[0]
              })
        }
    }
</script>

组件中引用，post请求方式：

<template>
    <div class="hello"></div>
</template>

<script>
    import axios from "axios"
    export default{
        name:"HelloWorld",
        mounted(){
            axios({
                method:"post",
                url:"http://iwenwiki.com/api/blueberrypai/login.php",
                data:{
                    user_id:"iwen@qq.com",
                    password:"iwen123",
                    verification_code:"crfvw"
                }
            }).then(res =>{
                    console.log(res.data);
                })
        }
    }
</script>

在网页中看到控制台显示参数缺失，请传递完整参数，此时参数是对的，出现这种问题是因为网络请求接收参数的方式并不是对象类型，而是一个字符串类型，那么这个时候就需要做一个数据的转换。

数据转换

1、此时在终端要退出运行状态：Ctrl+C（提示：cls可以清屏）

2、在终端输入：cnpm  install --save querystring（转换格式）

3、重新启动：npm run serve

4、在HelloWorld.vue中输入：

<template>
    <div class="hello"></div>
</template>

<script>
    import axios from "axios"
    import querystring from "querystring"//第一步添加
    export default{
        name:"HelloWorld",
        mounted(){
            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 =>{
                    console.log(res.data);
                })
        }
    }
</script>

注：post请求参数是需要额外处理的

①安装依赖：npm install --save querystring

②转换参数格式：querystring.stringify({})

快捷方案：

<template>
    <div class="hello"></div>
</template>

<script>
    import axios from "axios"
    import querystring from "querystring"
    export default{
        name:"HelloWorld",
        mounted(){
            //get方法
           axios.get("http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php")
           .then(res =>{
                console.log(res.data); 
            })
           
           //post方法 
   axios.post("http://iwenwiki.com/api/blueberrypai/login.php"),querystring.stringify({
                    user_id:"iwen@qq.com",
                    password:"iwen123",
                    verification_code:"crfvw"
            })).then(res =>{
                    console.log(res.data);
                })
        }
    }
</script>

全局引用：

在main.js当中引入axios：

import {createApp} from 'vue'
import App from './App.vue'
import './registerServiceWorker'

//四步，将Axios挂载到全局

//第一步，引入axios
import axios from "axios"

//第三步，添加app对象
const app = createApp(App) 

//第二步，把axios挂载到全局
app.config.globalProperties.$axios = axios

//第四步，把app弄成独立的对象
app.mount('#app')

因为挂载全局是把axios挂载到了全局，给它起了新的名字叫$axios，所以写的时候，直接读$axios就行了。那么在HelloWorld.vue中写入：

<template>
    <div class="hello"></div>
</template>

<script>
    import querystring from "querystring"
    export default{
        name:"HelloWorld",
        mounted(){
            //get方法
           this.$axios.get("http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php")
           .then(res =>{
                console.log(res.data); 
            })
           
           //post方法 
                   this.$axios.post("http://iwenwiki.com/api/blueberrypai/login.php"),querystring.stringify({
                    user_id:"iwen@qq.com",
                    password:"iwen123",
                    verification_code:"crfvw"
            })).then(res =>{
                    console.log(res.data);
                })
        }
    }
</script>