axios的使用

lieeps 发布于2019-08-22 16:23 / 3054人阅读

摘要：但是如果你想以的方式传参，则需要做一点改变参考这里注意如果你的请求方法是，又规定了参数格式是，则必须要使用下面这些方法中的一种。

axios是vue官方推荐的http库，详情见官方中文文档。

安装：

npm install axios

安装依赖：

npm install --save axios vue-axios

配置模板：

//main.js中
import Vue from "vue"
import axios from "axios"
import VueAxios from "vue-axios"
 
Vue.use(VueAxios, axios)
//然后你就能愉快地使用axios啦

如果不想这样安装，也可以快速引用它：

如何使用：

有好几种方法，get post delete put patch 什么的，不过我通常就用get和post两种，所以我就记录这种中的使用方法了。

let data = {   //要传的参数
    "loginName":"123456",
    "passWord":"123456",
    "updateSign":"52af3ce8a82f62707789fe00899ed3f0",
    "isLogin":"1"
}


//post请求

this.axios.post("/api/user/sickUserLogin/3",data)
    .then((response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });
 
    
//get请求

this.axios.get("/api/user/sickUserLogin/3",{params:data})
    .then((response) => {
        console.log(response.data);
        console.log(response);   
    })
    .catch(function (error) {
        console.log(error);
    });

这里要注意一点的是：get和post请求的传参方式是不一样的，原因可以参考这里

axios.get("url", {params: data});
axios.post("url", data);

//get请求的参数是拼接url字符串传递的；
//post请求的参数是通过data请求主体传递的；

参数格式：

axios的默认参数格式是json字符串，传参方式就像上面那个demo一样即可。但是如果你想以key：value的方式传参，则需要做一点改变：参考这里
注意：如果你的请求方法是post，又规定了参数格式是application/x-www-form-urlencoded，则必须要使用下面这些方法中的一种。（我在写demo的时候测试了一下，post方法下json传参格式是失败的，必须要改成键值对的格式，否则会报错）
主要推荐这种写法：

var qs = require("qs");
axios.post("/foo", qs.stringify({ "bar": 123 }));

这个方法需要先安装一下qs：

npm install qs

import qs from "qs"

Vue.prototype.qs = qs;  //全局定义，使用的时候用this.qs.stringify(data)即可

还有另一种写法浅显易懂：

var params = new URLSearchParams();    //这种写法不需要引入qs
params.append("collectId","16");       //你要传给后台的参数值 key/value
params.append("collectTye","2");
params.append("isCancel","2",);


this.$axios({
    method: "post",
    url:url,
    data: params 
}).then((res)=>{

})

设置axios的baseURL：

//在main.js中：
axios.defaults.baseURL = "http://api.eeesys.com:18087/";
//这些具体的写法可以多看几遍文档，就懂了，我也不是很懂
//根据我的测验，这样写了之后，请求会忽略掉proxyTable中的配置，直接请求这个地址，这样在生产环境下就可以跨域了，不知道是不是这样的

重新定义一个axios实例：

const $axios = axios.create({
    baseURL: "http://api.eeesys.com:18087/",
    timeout: 5000,
    headers: {
        "Content-Type": "application/x-www-form-urlencoded"
    }
});

// 初始化默认post header,这里规定了post请求的传参格式是application/x-www-form-urlencoded
//如果不这样写，后台接收到的参数是null
$axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
Vue.prototype.$axios = $axios;

这样就可以在代码中使用自己定义的axios实例，没有配置的属性会继承lib/defaults.js文件中的设置

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

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

Axios源码深度剖析 - AJAX新王者

摘要：我们先来看看构造函数构造函数就是用来实现拦截器的，这个构造函数原型上有个方法。关于源码，其实是比较简单的，都是用来操作该构造函数的实例属性的。存放拦截器方法，数组内每一项都是有两个属性的对象，两个属性分别对应成功和失败后执行的函数。 Axios源码分析 - XHR篇文章源码托管在github上，欢迎fork指正！ axios 是一个基于 Promise 的http请求库，可以用在浏览...

DangoSky 2019-08-22 17:34 评论0 收藏0
axios 中文文档翻译

摘要：返回状态码，如果返回或者设置成，将会其他的将。一些错误是在设置请求时触发的你可以使用设置选项自定义状态码的错误范围。 axios 版本:v0.18.0 0.18.0的版本更新有一段时间了，使用起来跟原先基本没有什么变化。但是增加了一些功能，例如错误处理的辨别，于07-06-2018重新翻译和校验了该翻译，更正了一些错别字和表达不准的地方，但是难免仍有错误，欢迎指出。由于工作需要，个人...

verano 2019-08-20 14:32 评论0 收藏0
Vue+Typescript中在Vue上挂载axios使用时报错

摘要：也就是说我们手动在原型身上挂载无法识别到。这样就完美避免了报错的问题。说明使用进行开发的过程中，会遇到各种各样的报错问题，希望记录下来，避免下次再次踩坑，也希望帮助其他人。 Vue+Typescript中在Vue上挂载axios使用时报错在vue项目开发过程中，为了方便在各个组件中调用axios，我们通常会在入口文件将axios挂载到vue原型身上，如下：main.ts import...

AaronYuan 2019-08-26 10:37 评论0 收藏0
vue2.0+axios+mock+axios-mock+adapter实现登陆

摘要：做项目过程中，需要用到后台模拟数据，在机缘巧合下发现了，在学习使用的过程中又偶遇了。做项目过程中，需要用到后台模拟数据，在机缘巧合下发现了mock，在学习使用的过程中又偶遇了axios-mock-adapter。现在将实例展示如下：准备实例是建立在vue-cli的基础上实现需要提前安装的插件有：axios：npm install axio --savemockjs：npm ins...

RancherLabs 2019-08-22 18:49 评论0 收藏0
Axios学习笔记

摘要：表示应该使用基础验证，并提供数据。表示服务器响应的数据类型，可以是，，，，，，默认值是承载的值的头的名称。对原生进度事件的处理定义允许的响应内容的最大尺寸。基本认证的过程。后者将优先于前者。 Axios说明 Axios是一个基于promise的HTTP库，可以用在浏览器和node.js中。安装使用npm: $ npm install axios 使用bower $ bower in...

546669204 2019-08-23 13:38 评论0 收藏0