Vue3-Axis网络请求

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

安装

Axios的应用需要单独安装 npm install --save axios

引入

在组件中需引入 import axios from "axios" （针对全局，在全局中引入即可）

post请求需引入 import qs from "querystring";

全局引用

import axios from "axios"
 
const app = createApp(App);                // 创建一个app对象
app.config.globalProperties.$axios = axios // 将Axios对象挂载到全局
app.mount('#app')
 
// 在组件中调用
this.$axios  
/*
//在全局可以按照下面例子使用:
this.$axios({
    method:"post",
    url:"http://iwenwiki.com/api/blueberrypai/login.php",
    data:qs.stringify({
        user_id:"iwen@qq.com",
        password:"iwen123",
        verification_code:"crfvw"
    })
}).then(res =>{
    console.log(res.data);
})
*/

非全局引用

get请求

axios({
    method: "get",
    url: "http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php"
}).then(res => {
    console.log(res.data);
})

post请求

温馨提示

post请求接收数据不是对象类型，而是字符串类型,因此要有格式转换

1.安装依赖：      npm install --save querystring

2.转换参数格式：qs.stringify( { } )

axios({
    method:"post",
    url:"http://iwenwiki.com/api/blueberrypai/login.php",
    data:qs.stringify({
        user_id:"iwen@qq.com",
        password:"iwen123",
        verification_code:"crfvw"
    })
}).then(res =>{
    console.log(res.data);
})

快捷方案 

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", qs.stringify({
      user_id: "iwen@qq.com",
      password: "iwen123",
      verification_code: "crfvw"
    }))
     .then(res => {
       console.log(res.data);
     })