点击刷新
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。在vue项目之中使用axios是一个非常明智的选择，因为vue官方已经宣称不再维护vue-resource,并且推荐使用axios。
axios本身具有以下特征：
从浏览器中创建 XMLHttpRequest
从 node.js 发出 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防止 CSRF/XSRF
为什么选择axios？
使用axios可以统一做请求-响应拦截，例如响应时我们将响应信息拦截起来，判断状态码，从而弹出报错信息
设定请求超时,例如3000ms未响应则停止请求
基于promise,可以很方便地使用then或者catch来处理请求
自动转换json数据
axios怎么引入到vue中？
1、安装
可以直接使用npm install来进行安装。
npm install axios //使用淘宝源 cnpm install axios
2、引入axios
只需要在需要的vue文件中引入axios就可以，语句：
import axios from 'axios'
安装其他插件的时候，可以直接在 main.js 中引入并使用 Vue.use()来注册，但是 axios并不 是vue插件，所以不能 使用Vue.use()，所以只能在每个需要发送请求的组件中即时引入。 为了解决这个问题，我们在引入 axios 之后，通过修改原型链，来更方便的使用。
//main.js import axios from 'axios' Vue.prototype.$axios = axios
在 main.js 中添加了这两行代码之后，就能直接在组件的 methods 中使用 $axios命令
methods: {
get () {
let self = this
// 请求后台
this.$axios({
method: 'post',
url: '/url',
data: {}
}).then((result) => {
console.log(result)
})
}
}也可以通过CDN的方式直接引入到html中，然后在JS中直接使用，方式如下：
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
axios({
url:"https://www.baidu.com/",
headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'},
method:'post',
data:{age:30}
}).then((res)=>{
console.log(res);
}).catch((err)=>{
console.log(err)
})
</script>
</body></html>© 著作权归作者所有
举报
发表评论
0/200
