Axios深入浅出

in 网站建设
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9

安装axios:
yarn add axios
为什么项目的接口是异步加:
避免加载缓慢。这样当你访问的时候才会加载。
get请求:
get请求一般都是需要参数的。

created(){
// get的两种不同的写法
 axios.get('/data.json',{
            params:{
                id: 12
            }
        }).then((res)=>{
            console.log(res)
        })
        axios({
            method:'get',
            url:'/https://www.baidu.com',
            params:{
                id: 12,
            }
        }).then(res =>{
            console.log(res)
        })
        
        //post 用于表单提交
        //application/json
        let data = {
            id: 12
        }
        axios.post('/post', data).then(
            res => {
                console.log(res)
            }
        )
        axios({
            method:'post',
            url:'/post',
            data:data
        }).then(res =>{
            console.log(res)
        })
        
        // form-data请求
        let formData = new formData(); //对象一般是key value键值对
        for (let key in data){
            // append可以把键值添加到formData里面去
            // 第一个参数是key,第二个参数是value,可以用data[key]表示。
            formData.append(key,data[key])
        }
        axios.post('/post',formData).then(res =>{
            console.log(res)
        })
        
        // put请求
        axios.put('/put',data).then(res => {
            console.log(res)
        })
        
        // patch请求
        axios.patch('/patch',data).then(res => {
            console.log(res)
        })
}

开发过程中,所有的put和patch都可以用post代替,只是不太符合规范。
put和patch都是更新数据。
put是推送全部的数据到后端。
patch是只推送修改的数据。
delete删除:

// delete删除
        // 删除需要将后端接口拼到url上面
        // delete方法只有两个参数 url和config
        // 在url中传输 request paystring
        sxios.delete('/delete',{
            params:{
                id: 12            }
        }).then(res =>{
            console.log(res)
        })
        //方法2
        // 不是在url中进行传输的  request payload
        sxios.delete('/delete',{
            data:{
                id: 12            }
        }).then(res =>{
            console.log(res)
        })

routers

{
   title:'axios-demo'
   path:'/pages/axiosDemo',
   component: Loadable({
        loader: () => import('@/pages/axiosDemo'),
        loading: Loading,
      }),
}
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9
扫一扫关注公众号添加购物返利助手,领红包
Comments are closed.

推荐使用阿里云服务器

超多优惠券

服务器最低一折,一年不到100!

朕已阅去看看