Axios网络请求

92 阅读1分钟

Axios网络请求

Snipaste_2023-06-01_15-41-03.png

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

安装

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

引入

组件中引入: import axios from "axios

全局引用:

import axios from "axios

const app = createApp(App)
app.config.globalProperties.$axios = axios
app.mount('#app')

# 在组件中调用
this.$axios

网络请求基本示例

get请求

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

post请求

温馨提示

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

安装依赖:npm install --save querystring

转换参数格式:qs.stringfy({})

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);
    })

快捷方案

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);
    })