axious学习

axious

ajax和axios、fetch的区别

https://www.jianshu.com/p/8bc48f8fde75

官网参考

https://www.kancloud.cn/yunye/axios/234845

chorme浏览器设置跨域

https://jingyan.baidu.com/article/148a1921c9dbf24d71c3b11f.html

axious发送Get请求

   var App = {
        template:`<div><h1>我是入口组件</h1>
                    <button @click="sendAjax">axios发送</button>
                    </div>`,
        methods:{
            sendAjax(){
                this.$axios.get('http://127.0.0.1:8000/fs/ajax1.html?p=123')
                    .then(res=>{
                        console.log(res)
                    }).catch(err=>{
                        console.log(err)
                })
            }
        }
    }

或者

// 可选地，上面的请求可以这样做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

发送post请求

         sendPost(){
                this.$axios.defaults.baseURL='http://127.0.0.1:8000/'
                this.$axios.post('fs/f1.html',{
                    user: 'Fred',
                    pwd: 'Flintstone',
                    email:'1233@qq.com',
                    age:'20'
                })
                    .then(res=>{
                        console.log(res)
                        console.log(res.data)
                    }).catch(err=>{
                    console.log(err)
                })
            }

           >this.$axios.defaults.baseURL='http://127.0.0.1:8000/' 

配置基础的URL，后面发送的时候可以按照这个拼接

并发请求

https://www.kancloud.cn/yunye/axios/234845

---

axios相关配置

transformResponse

transformResponse 在传递给 then/catch前，允许修改响应数据

 sendAjax(){
        this.$axios.get('http://127.0.0.1:8000/fs/ajax1.html',{
            params:{
                id:6
            },
            // `transformResponse` 在传递给 then/catch 前，允许修改响应数据
            transformResponse: [function (data) {
                // 对 data 进行任意转换处理
                console.log(data)
                var res = JSON.parse(data)
                res.msg = 'transformResponse修改了data'
                return res;
            }],
        })
            .then(res=>{
                console.log(res)
                console.log(res.data)
            }).catch(err=>{
            console.log(err)
        })
    },

注意：如果在tans…中不进行json转换而直接返回的话，在then中拿到的res是一个字符串

transformRequest

sendPost(){
        this.$axios.defaults.baseURL='http://127.0.0.1:8000/'
        this.$axios.post('fs/ajaxpost',{
            user: 'Fred',
            pwd: 'Flintstone',
            email:'1233@qq.com',
            age:'20',

        },{
            // `transformRequest` 允许在向服务器发送前，修改请求数据
            // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
            // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
            transformRequest: [function (data) {
                // 对 data 进行任意转换处理
                console.log(data)
                data.user = 'Herry'
                data = JSON.stringify(data)
                return data;
            }],
        })
            .then(res=>{
                console.log(res)
                console.log(res.data)
            }).catch(err=>{
            console.log(err)
        })
    }

注意：transformRequest需要将data转换为json字符串，不然后端拿到的还是一个对象

请求拦截器和响应拦截器

利用请求拦截器和响应拦截器模范cookie和加载动画

• 请求拦截器

//添加请求拦截器
                this.$axios.interceptors.request.use((config)=>{
                    console.log('---config',config)
                    var token = localStorage.getItem('token')
                    if(token){
                        config.headers['token'] = token
                    }
                    this.isShow = true
                    // setTimeout(function () {
                    //     console.log('timeout')
                    // },1000)  此操作是异步的
                    return config
                },function (err) {
                    return Promise.reject(err)
                })

• 响应拦截器

       // 添加响应拦截器
                this.$axios.interceptors.response.use((response)=>{
                    // 对响应数据做点什么
                    console.log('response---',response)
                    if(response.data.token){
                        localStorage.setItem('token',response.data.token)
                    }
                    this.isShow = false
                    return response;
                }, function (error) {
                    // 对响应错误做点什么
                    return Promise.reject(error);
                });

更多

https://www.kancloud.cn/yunye/axios/234845