axios中文文档
axios发送GET、POST请求
axios拦截器的使用
安装
npm i axios -S
用axios代替ajax
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
axios中文文档
配置默认值
- 配置后端host 1axios.defaults.baseURL = 'https://api.example.com';
这样,url就不需要写成https://api.example.com/user
,只需要写成/user
即可
- 配置withCredentials 1axios.defaults.withCredentials = true;
表示跨域请求时带上凭证
- 配置POST请求格式1axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
基础用法
|
|
执行GET请求
|
|
带查询参数的GET请求
|
|
执行POST请求
GET请求可以直接/user?ID=12345
,数据会显示在地址栏;POST请求为了安全,不能直接在url后面接数据
在axios中的post请求要非常注意两个地方:
- 要设置合适的请求头,一般采用x-www-form-urlencoded即可
- 发送的数据要用qs序列化,因为axios默认的格式是Request Payload(打开控制台的Network -> Headers)。
|
|
此时,打开Network -> Headers,可以看到数据在Form Data
中了。
拦截响应,返回自定义假数据
|
|
更多axios配置
axios(config)
将axios添加到vue的prototype上
|
|
jsonp跨域
axios-jsonp-pro
官网:https://github.com/RekingZhang/axios-jsonp
npm i axios-jsonp-pro
使用
与axios一样的api,并且多了jsonp功能
vue-jsonp
npm i vue-jsonp
使用
this.$jsonp(url, dataObj, timeout)
|
|