axios 初学,对于axios使用方法的总结,理解axios的配置
今天学习vue仿写饿了么,发现用的是vue-resource,但是现在的市面上大家已经放弃了vue-resource了,改用axios;为什么会这样呢,具体也就是1、vue-recsource不在更新了;2、axios 支持 Node.js 环境的使用,换句话说在 Vue SSR 中不需要额外处理,vue-resources 当时是只提供了浏览器环境,现在不知道了;主要还是功能强大...
·
今天学习vue仿写饿了么,发现用的是vue-resource,但是现在的市面上大家已经放弃了vue-resource了,改用axios;
为什么会这样呢,具体也就是
1、vue-recsource不在更新了;
2、axios 支持 Node.js 环境的使用,换句话说在 Vue SSR 中不需要额外处理,vue-resources 当时是只提供了浏览器环境,现在不知道了;
主要还是功能强大了,而且使用方便;
1. 从浏览器中创建 XMLHttpRequest
2. 从 node.js 发出 http 请求
3. 支持 Promise API
4. 拦截请求和响应
5. 转换请求和响应数据
6. 取消请求
7. 自动转换JSON数据
8. 客户端支持防止 CSRF/XSRF
axios总结如下:
使用方法:
//引入axios并注册
import axios from 'axios'
Vue.prototype.$http = axios
axios({
method:'POST/GET',
url:"",
data:{}
}).then(function(res){
console.log(res)
}).catch(function(req){
console.log(req)
})
axios.get("url",{}).then().catch()
注:默认的请求方式是get
并发请求,axios.all()
var requesOne = function(){
return axios.get()
}
var requestTwo = function(){
return axios.post()
}
axios.all([requesOne,requestTwo]).then(axios.spread(function (acct, perms) {
// 两个请求现在都执行完成
}))
请求配置:
{
//url用于请求的服务器url具体地址
url:"/user",
method:'get',
//baseUrl会自动添加到url前面,除非url是一个绝对地址
baseURL:'https://www.baidu.com/',
//允许在想服务器发送数据之前对数据进行处理,修改
transformRequest:[function(data){
return data;
}],
//允许在请求返回的data数据传递给then或者catch之前,对数据进行处理,修改
transformResponse:[function(data){
return data;
}],
//自定义请求头
header:{
'X-Requested-With':'XMLHttpRequest'
},
//添加在URL中发送的参数
params:{
id:158
},
//序列化params
paramsSerializer:function(params){
return params
},
data:{},
//请求超时设置
timeout:100,
//跨域请求时是否需要使用凭证
//允许自定义处理请求,测试使用
adapter:function(config){},
//在验证,应该使用HTTP基础验证,并提供凭据
auth:{
username:"",
password:""
},
responseType:"",
//xsrfCookingName用作XSRF-TOKEN的cookie名称,不是很理解
xsrfCookingName:"XSRF-TOKEN",
xsrfHeaderName:"XSRF-TOKEN",
//允许为上传处理进度事件
onUploadProgress:function(){},
//允许为下载处理进度事件
onDownloadProgress:function(){},
maxContentLength:2000, //响应内容最大尺寸
//定义对于给定的HTTP 响应状态码是 resolve 或 reject promise 。如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`),promise 将被 resolve; 否则,promise 将被 rejecte
validateStatus: function(status){
return
},
maxRedirects:5 ,//最大重定向数量
//分别在node.js中用于定义在执行http和https时使用的自定义代理
httpAgent:new http.Agent({keepAlive: true}),
httpsAgent: new https.Agent({keepAlive: true}),
proxy:{
host:"192.168.0.1",
port: 8080,
auth:{
username:"",
password:""
},
//指定用来取消请求的cancel token
cancelToken:new CancelToken(function(cancel){})
}
更多推荐
已为社区贡献7条内容
所有评论(0)