axios 网络请求 get post

最新推荐文章于 2024-11-15 09:02:54 发布

原创最新推荐文章于 2024-11-15 09:02:54 发布 · 171 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

本文介绍了如何在项目中安装并使用Axios进行GET和POST请求，提供了简洁和详细的写法示例，包括安装Axios和querystring库的过程以及如何在Vue组件中调用它们进行数据获取。

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

1. 在代码目录下安装npm install --save axios

在组件页面引用

import axios from "axios"

2. 在代码目录下安装npm install --save querystring

import qs from 'qs'

3. get和post请求方式，详细和简洁写法

   <script>
   import axios from "axios"
   import qs from 'qs'

   export default{
     name: 'SecondComponent',
     data(){
        return{
            message:"我是secondComponent的数据"
        }
     },
     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",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请求详细写法
        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>