12.19

一.基于promise的HTTP的库

在浏览器(基于axios发送AJAX请求)  在node.js环境中运行(发送http请求)

支持promise API

ajax是对原生XHR封装  jQuery将技术进行封装 变为ajax  promise又把ajax封装成axios

二.基本使用

const btns=document.querySelectorAll('button')
        
        btns[0].onclick=function(){
            axios({
                method:'GET',
                url:'http://localhost:3000/posts/2',

            }).then((response)=>{
         console.log(response)
            })
        }
        //往db.json里面添加数据
        btns[1].onclick=function(){
            axios({
                method:'POST',
                url:'http://localhost:3000/posts',//这里没有具体id
                //请求体
                data:{
                    title:'天气'
          
                }
            }).then((response)=>{
         console.log(response)
            })
        }
      //更新数据
      btns[2].onclick=function(){
        axios({
            method:'PUT',
            url:'http://localhost:3000/posts/3',
            data:{
                title:'季节'
            }

        }).then((response)=>{
         console.log(response)
            })
      }


      //删除数据
       btns[3].onclick=function(){
        axios({
            method:'DELETE',
            url:'http://localhost:3000/posts/6'
        })
       }

三.默认配置

const btns=document.querySelectorAll('button')
        //默认配置
        axios.defaults.method='GET'
        axios.defaults.baseURL='http://localhost:3000'
        axios.defaults.params={id:100}//url参数
        axios.defaults.timeout=3000 //三秒钟结果未返回取消请求
        btns[0].onclick=function(){
            axios({

                url:'posts',

            }).then((response)=>{
         console.log(response)
            })
        }

四.创建实例对象

//应用场景:需要向两个服务器请求 比较方便
        const real=axios.create({
         baseURL:'http://localhost:3000',
         timeout:2000
        })
        real({
            url:'/posts'
        }).then((response)=>{
          console.log(response)
        })

        const real1=axios.create({
            baseURL:'http://localhost:8000',
            timeout:2000
        })
        real1({
            url:'/posts'
        }).then((response)=>{
          console.log(response)
        })

五.拦截器

axios.interceptors.request.use(function(config){
            console.log('请求拦截器-1号 成功')
          return config
        },function(error){
            console.log('请求拦截器-1号 失败')
      return Promise.reject(error)
        })
        axios.interceptors.request.use(function(config){
            console.log('请求拦截器-2号 成功')
          return config
        },function(error){
            console.log('请求拦截器-2号 失败')
      return Promise.reject(error)
        })
        //响应拦截器
        axios.interceptors.response.use(function(response){
            console.log('响应拦截器-1号 成功')
          return response
        },function(error){
            console.log('响应拦截器-1号 失败')

      return Promise.reject(error)
        })
        axios.interceptors.response.use(function(response){
            console.log('响应拦截器-2号 成功')
          return response
        },function(error){
            console.log('响应拦截器-2号 失败')

      return Promise.reject(error)
        })

        //输出结果是请求  2  1  响应 1 2
        axios({
            method:'GET',
            url:'http://localhost:3000/posts'
        }).then((response)=>{
       console.log(response)
        })

六.取消请求

const btns=document.querySelectorAll('button')
        let cancel=null
        btns[0].onclick=function(){
            axios({
                method:'GET',
                url:'http://localhost:3000/posts',
                //添加属性
                cancelToken:new axios.CancelToken(function(c){
                    cancel=c
                })

            }).then(response=>{
                console.log(response)
            })
        }
        btns[1].onclick=function(){
            cancel()
        }