介绍vue项目中的axios请求（get和post）

jas0n 发布于2019-08-23 12:18 / 943人阅读

摘要：一先安装依赖，还有依赖依赖包用请求需要用到的插入一个知识点会把依赖包安装在生产环境中，并且把依赖包名称添加到文件。

一、先安装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文件下定义全局变量，这个项目我是定义服务器地址。

在main.js入口文件引用并挂载

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

四、请求后台接口数据（get请求和post请求）
1.get请求

不需要带参数的get请求

this.$axios.get(this.GLOBAL.host.+“后台接口地址”).then(res => {
//获取你需要用到的数据
})

需要带参数的get请求

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请求（举个例子）

私有云服务器托管 post和get的区别 GET和POST的区别 get post get_post

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98290.html

axios异步请求数据的简单使用

摘要：使用模拟好后端数据之后模拟数据的使用参考，就需要尝试请求加载数据了。数据请求选择了，现在都推荐使用。规定要发送到服务器的数据。布尔值，表示请求是否异步处理。要求为类型的参数，请求成功后调用的回调函数。在一个中重写回调函数的字符串。使用Mock模拟好后端数据之后（Mock模拟数据的使用参考：https://segmentfault.com/a/11...），就需要尝试请求加载数据了。数...

forsigner 2019-08-23 14:40 评论0 收藏0
Vue开发总结及一些最佳实践（已更新）

摘要：基本开发环境创建的项目，作为代码编写工具插件推荐插件配置文章目录项目目录结构介绍框架选择处理请求二次封装项目目录结构简介业务相关静态文件全局组件基础样式布局样式及工具引入请求配置路由全局状态管理工具文件入口文件主要配置文件页面检查配置测试基本开发环境 vue-cli3 创建的项目，vscode 作为代码编写工具vscode插件推荐：vscode 插件配置文章目录项目目录结构介绍...

NotFound 2019-08-26 13:47 评论0 收藏0
vue封装axios基本思路

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。在vue项目之中使用axios是一个非常明智的选择，因为vue官方已经宣称不再维护vue-resource,并且推荐使用axios. 1 为什么选择axios？使用axios可以统一做请求-响应拦截，例如响应时我们将响应信息拦截起来，判断状态码，从而弹出报错信息设定请求超时,例如3000ms未响应...

microcosm1994 2019-08-26 12:10 评论0 收藏0
后端开发者的Vue学习之路（五）

摘要：由服务器提供的响应来自服务器响应的状态码来自服务器响应的状态信息服务器响应的头是为请求提供的配置信息所以请求返回后，我们可以通过来获取响应情况。拦截器拦截器拦截器用于拦截发起的请求或用于拦截返回的响应。目录上节内容回顾使用第三方组件库如何发起请求请求错误处理请求带参 ...

jay_tian 2019-04-23 11:51 评论0 收藏0
vue开发项目完全指南

摘要：有两种方法，一种是在开发环境中设置通过的，另一种是在服务器上修改的配置设置。这样我们以后使用访问接口就可以不加了，打包后访问也不用手动去除统一管理在项目开发过程中，会涉及到很多接口的处理，当项目足够大时，就需要统一管理接口。这篇文章总结了vue项目的所遇到的问题，包括跨域、用户认证、接口统一管理、路由配置、兼容性处理，性能优化等内容。项目github地址 : 前端 https:...

leoperfect 2019-08-23 16:16 评论0 收藏0