vue3学习（Axios网络请求）

Axios网络请求

Axios是一个基于promise的网络请求库、

安装

Axios的应用是需要单独安装的。 cnpm install –save axios

引入

1. 组件中引入（每个组件使用到网络请求都要引入一次）：import axios from “axios”
2. 全局引用（所有的组件只要引入一次就ok）：

Import axios from “axios”

网络请求基本示例（局部引入）

get请求：

mounted(){//组件已经渲染完成，所以可以把网络请求放在这个生命周期当中
    axios({
      methods:"get",
      url:"http://localhost:8090/admins/login"
    }).then(res=>{
      console.log(res.data);
    })
  }

1. axios.get(...).then(res => {...})；用于异步请求的 axios 返回的就是一个 Promise 对象。

      （回调函数）通常情况下，我们要对操作执行的结果进行后续处理，但由于异步操作不知道什么时候可以执行完成，就出现了“回调函数”的概念，意思就是等异步操作处理结束了，再回头来调用这个函数对执行结果进行处理。

        2.箭头函数：相当于把function换成=>，将括号前移。例如：hello=function（）{}用箭头函数就是hello=（）=>{}。

Post请求：

   axios({
      method: "post",//注意这里是method不是methods
      url: "http://iwenwiki.com/api/blueberrypai/login.php",
      data: querystring.stringify({
        user_id: "iwen@qq.com",
        password: "iwen123",
        verification_code: "crfvw"

注：post请求参数是需要额外处理的 （1）安装依赖：npm install –save querystring  (2)转换参数格式query.stringify({}).

快捷方式：

Get请求

 axios.get("http://localhost:8090/admins/login").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)

    })

网络请求基本示例（全局引入）

1. 在main.js（主入口文件）中引入import axios from “axios”
2. 还需要将axios挂载到全局。（在main.js挂载）

  const app=createApp(App)

app.config.globalProperties.$axios = axios

app.mount('#app')

3．在组件中调用就直接输入this.$axios。