在vue项目中安装和使用axios
1.axios是啥axios 是一个基于Promise 用于浏览器和 node.js 的 HTTP 客户端。简单的理解就是ajax的封装它本身具有以下特征:(1)从浏览器中创建 XMLHttpRequest;(2)从 node.js 发出 http 请求;(3)支持 Promise API;(4)拦截请求和响应;(5)转换请求和响应数据;(6)取消请求;(7)自动转换JSON数据;(8)客户端支持
·
1.axios是啥
axios 是一个基于Promise 用于浏览器和 node.js 的 HTTP 客户端。简单的理解就是ajax的封装
它本身具有以下特征:
(1)从浏览器中创建 XMLHttpRequest;
(2)从 node.js 发出 http 请求;
(3)支持 Promise API;
(4)拦截请求和响应;
(5)转换请求和响应数据;
(6)取消请求;
(7)自动转换JSON数据;
(8)客户端支持防止 CSRF/XSRF;
2.vue中的axios安装两种方法
2.1使用npm安装
npm install axios --save
2.2使用cdn安装
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
3.使用axios之post
import axios from 'axios';
axios.defaults.baseURL = '/api';//配置的地址,千万不能落下
let params = new URLSearchParams();
params.append('name',"value");
params.append('name2',"value2,value3");
axios({
url: '/地址',
method: 'POST',
responseType: 'json',
data: params,
headers: {"Content-Type": "application/x-www-form-urlencoded","Accept": "text/html, */*"},
}).then(function (result)
注意:由于是在VUE中使用的,若设计到跨域问题,需要配置vue.config.js文件,例如:
devServer: {
proxy: {
'/api':{
target:'目标地址',
changeOrigin:true,
pathRewrite:{
'/admin':'和上面写一样 目标地址'
}
},
}
使用axios之get
换一种写法
import axios from 'axios';
axios.defaults.baseURL = '/api';
export default {
name: "test",
data(){
return{}
},
methods:{
getData(){
axios.get('/地址',{
params:{
name:value
}
}
).then( (result)=>{
console.log(result);
}).catch(function (error) {
console.log(error);
});
},
},
}
更多推荐
已为社区贡献4条内容
所有评论(0)