axios 初学,对于axios使用方法的总结,理解axios的配置

今天学习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 zxios.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){})
}

猜你喜欢

转载自blog.csdn.net/qq_34164814/article/details/80762737
今日推荐