Axios深入浅出

安装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,
      }),
}

拦截器：

export default{
     created(){
     // 请求拦截器
     axios.interceptors.request.use()
     },
}

service.js

const CONTACT_API={
// 获取联系人列表
    getContactList:{
       method:'get',
       url:'contactList',
    }
// 新建联系人列表
    newContactList:{
       method:'post',
       url:'/cont/new'
    }
 // 编辑联系人
 editContact:{
       method:'put',
       url:'/contact/edit'
 }
 
    
    
}