介绍vue项目中的axios请求(get和post)

2018-10-12 admin

一、先安装axios依赖,还有qs依赖

npm install axios --save
npm install qs --save

qs依赖包用post请求需要用到的

插入一个知识点:

npm install X --save 会把依赖包安装在生产环境中,并且把依赖包名称添加到 package.json 文件 dependencies。 而如果npm install X --save-dev则会把依赖包安装在开发环境中,并且添加到 package.json 文件 devDependencies 如果vue项目要部署上线,为防止依赖包失效,一般采用–save

二、在main.js入口引用

import qs from 'qs';
import axios from "axios";

//下面是将$axios和$qs挂在原型上,以便在实例中能用 this.$axios能够拿到
Vue.prototype.$axios = axios;
Vue.prototype.$qs = qs;

三、定义全局变量复用域名地址

开发中的url一般是由协议+域名+端口+接口路由+参数组成 一般 协议+域名 这两个部分是在axios是需要一直被复用的,所以可以设置一个专业的全局变量模块脚本文件,在模块里直接定义初始值,用export default 暴露出去,再入口文件main.js里面引入这个文件地址,并且使用Vue.prototype挂载到vue实例上面

  • 首先在static文件下面的config文件里面新建一个 global.js文件(命名随意)
  • 在global.js文件下定义全局变量,这个项目我是定义服务器地址。

图片描述

import Global from '../static/config/global'   //引用
Vue.prototype.GLOBAL = Global;   //挂载原型,可以使用this.GLOBAL拿到global.js的内容

四、请求后台接口数据(get请求和post请求) 1.get请求

this.$axios.get(this.GLOBAL.host.+“后台接口地址”).then(res => {
//获取你需要用到的数据
})
this.$axios.get(this.GLOBAL.host.+“后台接口地址”,{
    params:{            
        phone:12345678   //参数,键值对,key值:value值
        name:hh
    }
}).then(res => {
    //获取你需要用到的数据
});

2.post请求

var data = {phone:12345678,name:hh}  //定义一个data储存需要带的参数
this.$axios.post(this.GLOBAL.host+“后台接口地址”,this.$qs.stringify(data)
).then(res =>{
    //获取你需要的数据
});

五、 全部代码

// main.js文件

import axios from "axios";
import qs from 'qs';
import Global from '../static/config/global';

Vue.prototype.$axios = axios
Vue.prototype.$qs = qs;
Vue.prototype.GLOBAL = Global;

// global.js文件

const host = '协议+域名地址+端口';
export default {
  host
}

// 组件中发送axios请求(举个例子)

<template>
    <div class="sort">
        <li v-for="cate in categoryList" >{{cate.name}}</li>
    </div>
</template>

<script>
    export default {
        created(){
            this.getCategory();
        },
        data(){
            return{
                categoryList:[]
            }
        },
        methods:{
            getCategory:function(){
                this.$axios.get(this.GLOBAL.host+"/虚拟接口/a/all_category").then(res => {
                    var result=res.data;
                    if(result.code==0){
                        this.categoryList=result.data;
                    }
                });
            }
        }
    }

</script>

<style scoped>
    /*样式*/

</style>

原文链接:https://segmentfault.com/a/1190000016653561

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-42454.html

文章标题:介绍vue项目中的axios请求(get和post)

相关文章
如何为高负载网络优化Nginx 和 Node.js?
译者:AlfredCheung 在搭建高吞吐量web应用这个议题上,NginX和Node.js可谓是天生一对。他们都是基于事件驱动模型而设计,可以轻易突破Apache等传统web服务器的C10K瓶颈。预设的配置已经可以获得很高的并发,不过,...
2015-11-12
vue.js实现请求数据的方法示例
vue2.0示例代码如下: var vm = new Vue({ el:&quot;#list&quot;, data:{ gridData: &quot;&quot;, }, ...
2017-03-20
2015 Web 2.0和AJAX如何做好优化
2015如何让做好web2.0和ajax的优化?JavaScript中文网总结当下提出以下四大优化意见,旨在帮助W前端开发人员有效利用APM解决上述问题。 随着Web应用程序速度与效率快速增长,网站已经成为企业与其客户进行交互的第一途径——...
2015-11-12
最细致的vue.js基础语法 值得收藏!
介绍 前段时间接触到一个库叫做Vue.js, 个人感觉很棒,所以整理了一篇博文做个介绍。 Vue读音/vju:/,和view类似。是一个数据驱动的web界面库。Vue.js只聚焦于视图层,可以很容易的和其他库整合。代码压缩后只有24kb。 ...
2017-03-21
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
直接贴代码了: 先上输入前的样子: &lt;style&gt; #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block...
2017-03-17
2015年将会有大量基于HTML5和JS的WEB应用
随着HTML5的定稿,以及JS的迅速发展,我们有理由相信,在接下来的一年里,将会涌现出大量的WEB应用,网站的表现形式将不再仅仅局限于过去的形式,必将在2015年引来一次重大改革! ...
2015-11-12
三步搞定vue在vscode的环境配置问题
1. vscode基础开发插件 vscode-icons 图标美化 Debugger for Chrome 调试 Beautify 代码格式化 Prettier 代码格式化 ESLint 代码规范 JavaScript (ES6) cod...
2017-12-25
JavaScript基本语法和规范
JavaScript是区分大小写的,使用Unicode字符集。 在JavaScript中,语句以“;”结尾。 JavaScript脚本的源文本被从左到右执行。 虽然有时“;”是不必要的,但我们建议总是在你的语句结束处添加分号;它将避免副作用...
2015-11-12
JavaScript和Java
JavaScript和Java在某些方面相似但完全不同。 JavaScript语言类似于Java但是没有Java的静态类型和强类型检查,不过它们的语法和 C 语言都很相似。 JavaScript基于原型的对象模型,而不是更常见的基于类的对象...
2015-11-12
vue使用watch 观察路由变化,重新获取内容
问题背景: 点击用户头像 =&gt; 进入用户个人中心,在用户个人中心里点击其他用户的头像,我希望显示被点击用户的个人中心,但只看到了路由参数在发生变化,页面内容并没有更新。如图: 页面代码如下: &lt;script&gt; exp...
2017-03-13
回到顶部