首页 > 其他分享 >Vue使用axios请求

Vue使用axios请求

时间:2022-11-15 11:35:17浏览次数:45  
标签:axios 请求 api res Vue com msg data

新建组件(局部引入):

<template>
  <div>
    <p>{{ msg }}</p>
  </div>
  
</template>

<script>
import axios from 'axios';
import QueryString from 'qs';

export default {
  name: 'HelloWorld',
  data(){
    return{
      msg:"111",
    }
  },
  mounted(){
        //Fetch API 基本用法
    // fetch('http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php').then(function(data){
    //   // text()方法属于fetchAPI的一部分,它返回一个Promise实例对象,用于获取后台返回的数据
    //   return data.json();
    // }).then(function(data){
    //   console.log(data.chengpinDetails[0].title);
    // })
    // get
    // axios({
    //   method:"get",
    //   url:"http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php",
    // }).then(res=>{
    //   this.msg=res.data.chengpinDetails[0].title
    // })
    // post
    // axios({
    //   method:"post",
    //   url:"http://iwenwiki.com/api/blueberrypai/login.php",
    //   data: QueryString.stringify({
    //     user_id: "[email protected]",
    //     password: "iwen123",
    //     verification_code: "crfvw"
    //   })
    // }).then(res=>{
    //   this.msg=res.data
    // })

    // axios.get('http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php').then(res=>{
    //   this.msg=res.data.chengpinDetails[0].title
    // })
    axios.post('http://iwenwiki.com/api/blueberrypai/login.php',QueryString.stringify({
      user_id: "[email protected]",
      password: "iwen123",
      verification_code: "crfvw"
    })).then(res=>{
      this.msg=res.data.success
    })
  }  
}
</script>

<style scoped>

</style>

查看请求效果:

 

成功请求。

 

 

全局引入步骤:

首先在main.js中引入:

 

 然后进行挂载:

 

 使用的时候需要变化一下:

 

 查看效果:

 

 请求成功。

 

标签:axios,请求,api,res,Vue,com,msg,data
From: https://www.cnblogs.com/0099-ymsml/p/16891825.html

相关文章

  • vue+element实现拖拽分屏
    实现效果:使用鼠标点击分割线拖动,可实现左右展示框宽度(也可修改为高度)的变化,如下图1、封装组件首先需要封装按钮点击的这条线,计算鼠标点击后滑动的距离:<template><di......
  • Vue 拦截器思路
    //数据响应拦截器,统一处理返回的数据逻辑axios.interceptors.response.use(res=>{if(res&&res.status==HTTP_STATUS.SUCCESS){returnres.data;}els......
  • 【Vue3】本地没问题,部署后 public 下的某些资源 404 不能访问
    如果你本地没问题,线上访问出现404,你得看看你public下面得资源文件夹命名是不是和.gitignore下得配置文件冲突了,我就是命名为dist导致直接被忽略了,重新改了个名字后......
  • vuecli作用域插槽
    <template><divid="app"class="container"><Categorytitle="美食"><templatescope="{games}"><ul><liv-for="(g,inde......
  • vue源码分析-基础的数据代理检测
    简单回顾一下这个系列的前两节,前两节花了大量的篇幅介绍了Vue的选项合并,选项合并是Vue实例初始化的开始,Vue为开发者提供了丰富的选项配置,而每个选项都严格规定了合并的策......
  • vue源码分析-挂载流程和模板编译
    前面几节我们从newVue创建实例开始,介绍了创建实例时执行初始化流程中的重要两步,配置选项的资源合并,以及响应式系统的核心思想,数据代理。在合并章节,我们对Vue丰富的选项......
  • vue源码分析-响应式系统工作原理
    上一章,我们讲到了Vue初始化做的一些操作,那么我们这一章来讲一个Vue核心概念响应式系统。我们先来看一下官方对深入响应式系统的解释:当你把一个普通的JavaScript对象传......
  • vue中的ajax
    vue中的ajaxvue脚手架配置代理方法一​ 在vue.config.js中添加如下配置:devServer:{proxy:"http://localhost:5000"}说明:优点:配置简单,请求资源时直接发给前端(80......
  • Vuex 数据持久化(vuex-persistedstate)
    使用conststore=newVuex.Store({modules:{user:{},},getters,actions,//异步mutations,//同步plugins:[createPersistedState({......
  • vue cli 下载 node_modules
    cd至项目文件根目录npminstall用npm安装有可能会到导致关联失败解决方案yarninstall安装yarnyarn安装第三方库比npm会快一些npminstallyarn-g如果M......